Gallery styles relocation

masa-finance · Aug 30, 2023 · 5979c8d · 5979c8d
1 parent bef67cc
commit 5979c8d
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 183 deletions.
diff --git a/src/refactor/ui/components/gallery/gallery.scss b/src/refactor/ui/components/gallery/gallery.scss
@@ -0,0 +1,181 @@
+.masa-gallery-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .not-connected-message {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    h2 {
+      font-family: Ezra;
+    }
+
+    button {
+      font-weight: 500;
+      width: 50%;
+    }
+  }
+  .masa-gallery {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px 20px;
+    padding-left: 12px;
+    margin-top: 12px;
+
+    .gallery-item {
+      position: relative;
+      padding: 12px 18px;
+      border-radius: 8px;
+      box-sizing: border-box;
+      background-color: black;
+
+      width: 100%;
+      max-width: 250px;
+      max-height: 340px;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+      }
+
+      img {
+        width: 100%;
+        max-width: 280px;
+        border-radius: 12px;
+        z-index: 20;
+      }
+
+      .gallery-item-info {
+        z-index: 20;
+
+        padding: 16px 0;
+        font-size: 21px;
+        font-family: Inter;
+        font-weight: 500;
+        color: white;
+
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        transition: color 300ms ease-in-out;
+
+        .gallery-item-title {
+          margin: 0;
+          word-wrap: break-word;
+          font-size: 18px;
+          color: white;
+        }
+
+        .gallery-item-description {
+          margin: 0;
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+.tabs-container {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  flex-direction: column;
+  grid-template-rows: 60px 1fr;
+
+  .tabs-header {
+    height: 100%;
+  }
+
+  .tab-content {
+    height: 100%;
+    overflow: auto;
+  }
+}
+.tabs-header {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.tabs-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  border: none;
+}
+.tabs {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.tab-content {
+  width: 100%;
+}
+.tab {
+  padding: 8px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.3s ease;
+  font-family: Ezra, 'Helvetica Neue';
+
+  &:hover {
+    color: black;
+  }
+}
+
+.active {
+  color: black;
+}
+
+.active::before {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: black;
+  transition: transform 0.3s ease;
+}
+
+.plus-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 8px;
+  font-size: 24px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+
+  &:hover {
+    background-color: black;
+    color: #fff;
+  }
+}
diff --git a/src/refactor/ui/styles.scss b/src/refactor/ui/styles.scss
@@ -2,6 +2,7 @@
 @use './scss/rodal.scss';
 @use './scss/modal.scss';
 @use './components/button.scss';
+@use './components/gallery/gallery.scss';
 @use './scss/rc-tooltip.scss';
 
 :root {

diff --git a/src/styles.scss b/src/styles.scss
@@ -870,190 +870,8 @@
       }
     }
   }
-
-  // GALLERY STARTING
-  .masa-gallery-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    .not-connected-message {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 20px;
-
-      h2 {
-        font-family: Ezra;
-      }
-
-      button {
-        font-weight: 500;
-        width: 50%;
-      }
-    }
-    .masa-gallery {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center; 
-      gap: 12px 20px;
-      padding-left: 12px;
-      margin-top: 12px;
-
-      .gallery-item {
-        position: relative;
-        padding: 12px 18px;
-        border-radius: 8px;
-        box-sizing: border-box;
-        background-color: black;
-
-        width: 100%;
-        max-width: 250px;
-        max-height: 340px;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.8);
-        }
-
-        img {
-          width: 100%;
-          max-width: 280px;
-          border-radius: 12px;
-          z-index: 20;
-        }
-
-        .gallery-item-info {
-          z-index: 20;
-
-          padding: 16px 0;
-          font-size: 21px;
-          font-family: Inter;
-          font-weight: 500;
-          color: white;
-
-          width: 100%;
-
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-
-          transition: color 300ms ease-in-out;
-
-          .gallery-item-title {
-            margin: 0;
-            word-wrap: break-word;
-            font-size: 18px;
-            color: white;
-          }
-
-          .gallery-item-description {
-            margin: 0;
-            color: white;
-          }
-        }
-      }
-    }
-  }
-
-  .tabs-container {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    flex-direction: column;
-    grid-template-rows: 60px 1fr;
-
-    .tabs-header {
-      height: 100%;
-    }
-
-    .tab-content {
-      height: 100%;
-      overflow: auto;
-    }
-  }
-  .tabs-header {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .tabs-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    border: none;
-  }
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-    padding: 0;
-    margin-bottom: 16px;
-    position: relative;
-  }
-
-  .tab-content {
-    width: 100%;
-  }
-  .tab {
-    padding: 8px 16px;
-    font-size: 16px;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.3s ease;
-    font-family: Ezra, 'Helvetica Neue';
-
-    &:hover {
-      color: black;
-    }
-  }
-
-  .active {
-    color: black;
-  }
-
-  .active::before {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: black;
-    transition: transform 0.3s ease;
-  }
-
-  .plus-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 8px;
-    font-size: 24px;
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    border: 1px solid #ccc;
-    border-radius: 50%;
-    transition:
-      background-color 0.3s ease,
-      color 0.3s ease;
-
-    &:hover {
-      background-color: black;
-      color: #fff;
-    }
-  }
 }
+
 // RODAL STYLES
 /* -- container -- */
 .rodal,