style: scss updated

devhatt · Aug 19, 2024 · c15b894 · c15b894
1 parent e9fdd6b
commit c15b894
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 28 deletions.
diff --git a/src/components/Preview/Preview.module.scss b/src/components/Preview/Preview.module.scss
@@ -10,7 +10,7 @@
 
   align-items: center;
 
-  padding: 4.2rem 1.6rem;
+  padding: 2.25rem 0.75rem;
 
   background-color: global.$tertiaryWhite;
 

diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
@@ -13,16 +13,16 @@ const previewModeMockList = [
     id: 'mobile',
     name: 'mobile',
   },
-  {
-    icon: 'pc' as IconsType,
-    id: 'pc',
-    name: 'pc',
-  },
   {
     icon: 'tablet' as IconsType,
     id: 'tablet',
     name: 'tablet',
   },
+  {
+    icon: 'pc' as IconsType,
+    id: 'pc',
+    name: 'pc',
+  },
 ];
 
 function Preview(props: PreviewProps): ReactNode {
@@ -31,7 +31,7 @@ function Preview(props: PreviewProps): ReactNode {
       <div className={scss.previewContent}>
         <PreviewModeSelector list={previewModeMockList} />
       </div>
-      <div>{props.children} </div>
+      <div>{props.children}</div>
     </div>
   );
 }

diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss
@@ -5,12 +5,12 @@
 
   display: flex;
 
-  border: 1px solid $primaryGray;
+  align-items: center;
 
-  position: absolute;
-  top: 1.5rem;
+  border: 1px solid $primaryGray;
 
   background-color: $secondaryWhite;
+
   border-radius: 16px;
 
   &:focus-within,
@@ -19,28 +19,16 @@
   }
 
   .icon {
-    height: 100%;
-
     display: flex;
 
-    padding: 0.5rem;
+    padding: 1.25rem 1.3rem;
 
     path {
       fill: $tertiaryGray;
     }
   }
 
   .previewModeInput {
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-
-    white-space: nowrap;
-
-    margin: 0;
-    padding: 0;
-    border: 0;
-
     position: absolute;
 
     clip-path: inset(50%);
@@ -55,8 +43,6 @@
   }
 
   .previewModeLabel {
-    display: flex;
-
     cursor: pointer;
   }
 

diff --git a/src/components/Tabber/Tabber.module.scss b/src/components/Tabber/Tabber.module.scss
@@ -10,15 +10,13 @@
 
   padding: 2px;
 
-  position: relative;
-
   background-color: global.$tertiaryWhite;
 }
 
 .postModesContainer {
   height: 100%;
 
-  padding: 1.5rem 1rem;
+  padding: 2.4rem 1.2rem;
 
   background-color: global.$primaryWhite;
 }