feat: update theme

src/ui/BuildDeck/DeckSelect.module.scss

@@ -45,16 +45,19 @@
   }
 }
 
-.btn-add {
+.btn-add-container {
   position: absolute;
   bottom: 40px;
-  left: 50%;
-  transform: translate(-50%);
-  background: linear-gradient(rgba(89, 0, 255, 0.611), rgba(38, 0, 255, 0.611));
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .btn-add {
+    background-color: rgba(0, 168, 202, 0.451);
+
+    box-shadow: 0 0 20px 0 rgba(0, 221, 255, 0.5);
     &:hover {
-    background-color: rgb(78, 0, 223) !important;
-    box-shadow: 0 0 20px 0 rgba(128, 0, 255, 0.5);
-    transform: translate(-50%) scale(1.3);
+      background-color: rgba(0, 168, 202, 0.451) !important;
+      transform: scale(1.1);
+    }
   }
 }

src/ui/BuildDeck/DeckSelect.tsx

@@ -40,13 +40,16 @@ export const DeckSelect: React.FC<{
           </div>
         ))}
       </div>
+      <div className={styles["btn-add-container"]}>
         <Button
           className={styles["btn-add"]}
           icon={<PlusOutlined />}
           shape="circle"
           type="text"
           onClick={onAdd}
+          size="large"
         />
+      </div>
     </>
   );
 };

src/ui/BuildDeck/index.module.scss

@@ -75,8 +75,8 @@
     grid-template-columns: repeat(10, 1fr);
     gap: 5px;
   }
-  // --border-radius: 10px;
   background-color: hsla(0, 0%, 100%, 0.05);
+  backdrop-filter: blur(5px);
 }
 
 .deck .container {

src/ui/NewMatch/index.module.scss

@@ -54,9 +54,9 @@
     transition: 0.2s;
     cursor: pointer;
     &:hover {
-      box-shadow: 0 0 0 4px #3400d1;
-      background: hsla(0, 0%, 100%, 0.07);
-      filter: brightness(1.2) saturate(1.2);
+      box-shadow: 0 0 0 4px #2a5560;
+      // background: hsla(0, 0%, 100%, 0.07);
+      filter: brightness(1.2);
     }
     .icon {
       background: linear-gradient(#514f5780, #2a283277);

src/ui/Shared/Background/index.module.scss

@@ -11,12 +11,13 @@
   z-index: -1;
   display: flex;
   justify-content: center;
-  align-items: center;
+  // align-items: center;
 }
 
 .inner {
-  width: 90vw;
-  height: 50vh;
-  background: rgba(72, 0, 255, 1);
+  transform: translateY(-70%);
+  width: 60vw;
+  height: 100vh;
+  background: radial-gradient(#00814f, #1c0161);
   filter: blur(502px);
 }

src/ui/Shared/Background/index.tsx

@@ -6,10 +6,14 @@ import styles from "./index.module.scss";
 const _Background: React.FC<{
   style?: React.CSSProperties;
   innerStyle?: React.CSSProperties;
-}> = ({ style, innerStyle }) => {
+  innerOpacity?: number;
+}> = ({ style, innerStyle, innerOpacity = 1 }) => {
   return (
     <div className={styles.background} style={style}>
-      <div className={styles.inner} style={innerStyle}></div>
+      <div
+        className={styles.inner}
+        style={{ ...innerStyle, opacity: innerOpacity }}
+      ></div>
     </div>
   );
 };

src/ui/Start/index.module.scss

@@ -13,7 +13,7 @@
   .neos-pic {
     max-width: 100%;
     max-height: 100%;
-    filter: drop-shadow(0 0 50px #ffffff7d) drop-shadow(0 10px 0.5rem #3d0a71ce);
+    filter: drop-shadow(0 0 50px #ffffff7d) drop-shadow(0 10px 0.5rem #0a3c71ce);
   }
   .neos-logo {
     filter: drop-shadow(0 0 2rem #ffffffbc);