🚨 Lint styles

frontend/src/App.module.css

@@ -1,3 +1,3 @@
 .app {
-    margin: 16px;
-}
+  margin: 16px;
+}

frontend/src/App.tsx

@@ -15,9 +15,7 @@ const App: React.FC = () => (
     <Router>
       <ToastProvider>
         <Header />
-        <div className={styles.app}>
-          <Routes />
-        </div>
+        <div className={styles.app}></div>
         <Toast />
       </ToastProvider>
     </Router>

frontend/src/components/Header.module.css

@@ -1,13 +1,13 @@
 .logo {
+  position: relative;
+  top: -1px;
   display: inline-block;
   width: 24px;
   height: 24px;
   margin: 0 8px;
-  position: relative;
-  top: -1px
 }
 
 .navIcon {
   position: relative;
   top: -2px;
-}
+}

frontend/src/components/ProductCard.module.css

@@ -1,57 +1,57 @@
 .product {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background: transparent;
-    border: 4px solid transparent;
-    border-radius: 8px;
-    transition: background-color 0.1s ease-out, border 0.1s ease-out;
-    overflow: hidden;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid transparent;
+  background: transparent;
+  border-radius: 8px;
+  transition: background-color 0.1s ease-out, border 0.1s ease-out;
 }
 .product:hover {
-    background: rgba(0, 0, 0, 0.1);
-    border-color: rgba(25, 135, 84, 0.6);
+  border-color: rgba(25, 135, 84, 0.6);
+  background: rgba(0, 0, 0, 0.1);
 }
 .active {
-    background: rgba(25, 135, 84, 0.2);
-    border-color: rgba(25, 135, 84, 0.6);
+  border-color: rgba(25, 135, 84, 0.6);
+  background: rgba(25, 135, 84, 0.2);
 }
 .active:hover {
-    background: rgba(25, 135, 84, 0.2);
+  background: rgba(25, 135, 84, 0.2);
 }
 .productText {
-    position: absolute;
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    font-weight: bold;
-    padding: 4px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 8px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 8px;
+  color: white;
+  font-weight: bold;
 }
 .productImage {
-    width: 140px;
-    height: 140px;
-    object-fit: contain;
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
 }
 .noProductImage {
-    width: 140px;
-    height: 140px;
+  width: 140px;
+  height: 140px;
 }
 .amount {
-    font-weight: bold;
-    font-size: 2rem;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    border-radius: 8px;
-    padding: 4px;
-    line-height: 1;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 8px;
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  line-height: 1;
 }
 .wrap {
-    position: relative;
-}
+  position: relative;
+}

frontend/src/components/Toast.module.css

@@ -1,5 +1,5 @@
 .toast {
   position: absolute;
-  bottom: 32px;
   right: 32px;
-}
+  bottom: 32px;
+}

frontend/src/components/UserCard.module.css

@@ -1,34 +1,34 @@
 .user {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4px;
-    background: transparent;
-    border: 3px solid transparent;
-    border-radius: 8px;
-    transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+  border: 3px solid transparent;
+  background: transparent;
+  border-radius: 8px;
+  transition: background-color 0.1s ease-out, border 0.1s ease-out;
 }
 .user:hover {
-    background: rgba(0, 0, 0, 0.1);
-    border-color: rgba(25, 135, 84, 0.6);
+  border-color: rgba(25, 135, 84, 0.6);
+  background: rgba(0, 0, 0, 0.1);
 }
 .active {
-    background: rgba(25, 135, 84, 0.2);
-    border-color: rgba(25, 135, 84, 0.6);
+  border-color: rgba(25, 135, 84, 0.6);
+  background: rgba(25, 135, 84, 0.2);
 }
 .active:hover {
-    background: rgba(25, 135, 84, 0.2);
+  background: rgba(25, 135, 84, 0.2);
 }
 .avatar {
-    border-radius: 50px;
-    height: 50px;
-    width: 50px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
 }
 .avatar svg {
-    color: #ccc;
-    height: 50px;
-    width: 50px;
+  width: 50px;
+  height: 50px;
+  color: #ccc;
 }
 .name {
-    font-weight: bold;
-}
+  font-weight: bold;
+}

frontend/src/features/register/Register.module.css

@@ -1,28 +1,28 @@
 .userList {
-    display: grid;
-    grid-template-columns: repeat(12, 128px);
-    row-gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(12, 128px);
+  row-gap: 16px;
 }
 
 .productList {
-    display: grid;
-    grid-template-columns: repeat(8, 150px);
-    row-gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(8, 150px);
+  row-gap: 16px;
 }
 .productListSection {
-    margin-top: 2rem;
+  margin-top: 2rem;
 }
 
 .checkout {
-    margin-top: 32px;
+  margin-top: 32px;
 }
 
 .total {
-    display: inline-block;
-    margin-right: 8px;
-    padding: 4px 8px;
-    font-size: 1.8rem;
-    color: white;
-    background: black;
-    min-width: 200px;
-}
+  display: inline-block;
+  min-width: 200px;
+  padding: 4px 8px;
+  margin-right: 8px;
+  background: black;
+  color: white;
+  font-size: 1.8rem;
+}