Redesign frontend

src/App.css

@@ -1,142 +1,76 @@
 @import "tailwindcss";
 
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+  @apply box-border m-0 p-0;
 }
 
 body {
+  @apply bg-(--col0) text-white flex justify-center items-center h-screen text-center select-none;
   font-family: "Lexend", sans-serif;
-  background-color: #1e1e1e;
-  color: #e0e0e0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  text-align: center;
-  user-select: none;
+
+  --col0: rgb(8, 8, 8);
+  --col1: rgb(16, 16, 16);
+  --col2: rgb(32, 32, 32);
+  --col3: rgb(48, 48, 48);
+  --col4: rgb(64, 64, 64);
+  --col5: rgb(80, 80, 80);
+  --col6: rgb(96, 96, 96);
+  --col7: rgb(112, 112, 112);
+  --col8: rgb(128, 128, 128);
 }
 
 .container {
-  width: 90vw;
-  height: 90vh;
-  padding: 20px;
-  border-radius: 10px;
-  background-color: #2a2a2a;
+  @apply w-[90vw] h-[90vh] bg-(--col1) border border-(--col3) p-4 rounded-lg;
 }
 
 h1 {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  color: #b3b3ff;
+  @apply mb-2;
 }
 
 p {
-  font-size: 1rem;
-  margin-bottom: 20px;
-  color: #aaa;
+  @apply text-base mb-4;
 }
 
 .form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 15px;
+  @apply flex flex-col items-center gap-2;
 }
 
 .slider-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
+  @apply flex flex-col items-center w-full;
 }
 
 #password-length {
-  width: 80vw;
-  background: #333;
-  border: 2px solid #444;
-  border-radius: 5px;
-  height: 6px;
+  @apply w-[80vw];
+}
+
+button {
+  @apply bg-(--col3) hover:bg-(--col5) border border-(--col5) hover:border-(--col7) rounded-lg cursor-pointer transition-colors;
 }
 
 .preset-buttons {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: center;
+  @apply flex gap-2 flex-wrap justify-center;
 }
 
 .preset-btn {
-  padding: 10px 15px;
-  font-size: 1rem;
-  cursor: pointer;
-  background-color: #6a4cfc;
-  border: none;
-  color: white;
-  border-radius: 5px;
-  transition: background-color 0.3s;
-}
-
-.preset-btn:hover {
-  background-color: #7e61ff;
+  @apply px-2 py-1;
 }
 
 .generate-btn {
-  padding: 10px 20px;
-  font-size: 1.2rem;
-  background-color: #6a4cfc;
-  border: none;
-  color: white;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.generate-btn:hover {
-  background-color: #7e61ff;
+  @apply px-4 py-2;
 }
 
 .result-section {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  @apply flex flex-col items-center justify-center mt-2;
 }
 
 .password-display {
-  font-size: 1.2rem;
-  word-wrap: break-word;
-  margin-bottom: 10px;
-  background-color: #333;
-  color: #fff;
-  padding: 15px;
-  border-radius: 5px;
-  width: 80vw;
-  margin-bottom: 20px;
-  font-size: 15px;
+  @apply w-[80vw] mb-2 p-2 bg-(--col3) border border-(--col5) rounded-lg wrap-break-word;
 }
 
 .result-buttons {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
+  @apply flex flex-row gap-2.5 justify-center items-center;
 }
 
 .copy-btn {
-  padding: 10px 20px;
-  font-size: 1rem;
-  background-color: #6a4cfc;
-  border: none;
-  color: white;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.copy-btn:hover {
-  background-color: #7e61ff;
+  @apply px-4 py-2;
 }