feat: improvement on UI

Author: Dun-sin

index.html

@@ -249,8 +249,6 @@ <h2>
                 />
               </label>
 
-              <div class="preview" id="gradient-text-color-preview"></div>
-
               <label for="color" class="color">
                 <input
                   type="text"
@@ -262,6 +260,8 @@ <h2>
               </label>
             </div>
 
+            <div class="preview" id="gradient-text-color-preview"></div>
+
             <label id="degree">
               <span class="label-title">
                 <span>Degree</span>
@@ -291,8 +291,6 @@ <h2>
                 />
               </label>
 
-              <div class="preview" id="gradient-border-color-preview"></div>
-
               <label for="color" class="color">
                 <input
                   type="text"
@@ -304,6 +302,8 @@ <h2>
               </label>
             </div>
 
+            <div class="preview" id="gradient-border-color-preview"></div>
+
             <label class="radius" for="gradient-border-radius">
               <input type="checkbox" id="gradient-border-radius" name="check" />
               <span> Include Radius </span>
@@ -349,8 +349,6 @@ <h2>
                 />
               </label>
 
-              <div class="preview" id="gradient-background-color-preview"></div>
-
               <label for="color" class="color">
                 <input
                   type="text"
@@ -362,6 +360,8 @@ <h2>
               </label>
             </div>
 
+            <div class="preview" id="gradient-background-color-preview"></div>
+
             <label id="degree">
               <span class="label-title">
                 <span>Degree</span>
@@ -458,15 +458,17 @@ <h2>
           <!-- Box Shadow -->
           <div data-content="box-shadow">
             <div class="box-shadow-preview" id="box-shadow-preview"></div>
-            <label for="color" class="color">
-              <input
-                type="text"
-                data-coloris
-                placeholder="Tap to pick a color"
-                id="box-shadow-color"
-                class="box-shadow-inputs"
-              />
-            </label>
+            <div class="colors">
+              <label for="color" class="color">
+                <input
+                  type="text"
+                  data-coloris
+                  placeholder="Tap to pick a color"
+                  id="box-shadow-color"
+                  class="box-shadow-inputs"
+                />
+              </label>
+            </div>
 
             <div class="degrees">
               <div class="degrees-row">
@@ -583,15 +585,17 @@ <h2>
               placeholder="Enter the text"
             ></textarea>
 
-            <label for="color" class="color">
-              <input
-                type="text"
-                data-coloris
-                placeholder="Tap to pick a color"
-                id="text-shadow-color"
-                class="text-shadow-inputs"
-              />
-            </label>
+            <div class="colors">
+              <label for="color" class="color">
+                <input
+                  type="text"
+                  data-coloris
+                  placeholder="Tap to pick a color"
+                  id="text-shadow-color"
+                  class="text-shadow-inputs"
+                />
+              </label>
+            </div>
 
             <div class="degrees">
               <div class="degrees-row">

src/style.css

@@ -36,7 +36,7 @@
 }
 
 ::placeholder {
-  color: #000;
+  color: #ffffff;
 }
 
 body {
@@ -242,48 +242,56 @@ textarea {
 
 .colors {
   display: flex;
-  flex-direction: column;
   align-items: center;
   margin: var(--spacing) 0 var(--spacing) 0;
+  width: var(--generator-width);
 }
 
-.colors .preview {
+.colors + .preview {
   margin: var(--spacing) 0 var(--spacing) 0;
-  width: calc(var(--generator-width) / 2);
-  height: 20px;
+  width: var(--generator-width);
+  height: 50px;
   background-color: var(--primary-color);
+  border-radius: 5px;
+}
+
+.colors > .color:first-of-type {
+  margin-right: 10px;
 }
 
 .color {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
 }
 
 .clr-field {
-  width: var(--generator-width);
-}
-
-[data-coloris] {
   width: 100%;
-  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-[type='color'] {
-  width: 30px;
-  height: 30px;
-  border: none;
-  margin-right: 10px;
-  cursor: pointer;
+.clr-field > button {
+  top: 49% !important;
+  width: 40px !important;
 }
 
-[type='color']::-webkit-color-swatch-wrapper {
-  padding: 0;
+[data-coloris] {
+  width: 100%;
+  height: 30px;
+  background: none;
+  border: 1px solid #fff;
+  padding: 10px;
+  outline: none;
+  color: white;
+  border-radius: 5px;
 }
 
-[type='color']::-webkit-color-swatch {
-  border: none;
+[data-coloris]::placeholder {
+  color: #fff;
 }
 
 #radio-group {
@@ -294,7 +302,7 @@ textarea {
 
 .animation-type {
   background-color: var(--primary-color);
-  width: var(--content-container);
+  width: var(--generator-width);
   padding: 1rem;
   border-radius: 5px;
 }
@@ -366,7 +374,7 @@ input[type='number']::-webkit-outer-spin-button {
   background-color: var(--primary-color);
   padding: 0.8rem;
   border-radius: 5px;
-  width: var(--content-container);
+  width: var(--generator-width);
 }
 
 #degree .label-title {
@@ -383,7 +391,7 @@ input[type='number']::-webkit-outer-spin-button {
 
 .duration-label {
   background-color: var(--primary-color);
-  width: var(--content-container);
+  width: var(--generator-width);
   padding: 1rem;
   border-radius: 5px;
   margin-top: 1rem;
@@ -452,6 +460,7 @@ input[type='number']::-webkit-outer-spin-button {
   align-items: center;
   background-color: var(--primary-color);
   width: var(--content-container);
+  border-radius: 5px;
 }
 
 .degrees-row label {