resolved modify screen error and design

Author: geekyorion

src/components/codegenerator/codegenerator.jsx

@@ -41,8 +41,8 @@ export default class CodeGenerator extends React.Component {
     */
 
     setLocalStorage() {
-        var color = JSON.stringify({color1: this.state.color1, color2: this.state.color2})
-        localStorage.setItem(new Date().getTime(), color);
+        var color = JSON.stringify({color1: this.state.color1, color2: this.state.color2});
+        localStorage.setItem(`gradient-${new Date().getTime()}`, color);
     }
 
     generateRandom() {
@@ -137,4 +137,4 @@ export default class CodeGenerator extends React.Component {
 // 1. constructor
 // 2. Component will mount
 // 3. Component did mount
-// 4. component unmount
+// 4. component unmount

src/components/gradients/gradients.jsx

@@ -105,10 +105,13 @@ export default class Gradients extends React.Component {
     loadUserColors() {
         userColors = [];
         var colorKeys = Object.keys(localStorage);
+        colorKeys.sort().reverse();
         for (var i = 0; i <= colorKeys.length - 1; i++) {
             let key = colorKeys[i];
-            let value = localStorage.getItem(key);
-            userColors.push({ [key]: value });
+            if(key.startsWith('gradient-')) {
+                let value = localStorage.getItem(key);
+                userColors.push({ [key]: value });
+            }
         }
         var colors = getUserColors(this.state.startIndex, this.state.limitColors);
 
@@ -175,4 +178,4 @@ export default class Gradients extends React.Component {
             </div>
         );
     }
-}
+}

src/components/modify/modify.css

@@ -5,7 +5,7 @@
 .modify-controls {
     display: flex;
     justify-content: center;
-    flex-wrap: wrap;
+    align-items: center;
 }
 
 .input-controls {
@@ -14,6 +14,17 @@
     background: #6c757d;
     border-radius: 5px;
     box-shadow: 0 5px 10px #333;
+    max-width: 650px;
+    display: flex;
+}
+
+.input-group.angle-range {
+    min-width: 200px;
+    flex-wrap: nowrap;
+}
+
+.angle-range .form-control-range {
+    margin-left: 15px;
 }
 
 .input-controls .input-group-text {
@@ -26,4 +37,43 @@
     background: #6c757d;
     border: none;
     color: white;
-}
+}
+
+.angle-range-numeric {
+    min-width: 70px !important;
+    text-align: center;
+    padding-right: 6px !important;
+}
+
+.input-controls .input-group-prepend {
+    margin: 0;
+}
+
+@media (max-width: 950px) {
+    .modify-controls {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 500px) {
+    .input-controls .input-group:not(:last-child) {
+        border-bottom: 1px solid #444;
+    }
+    .input-controls {
+        flex-wrap: wrap;
+        max-width: 382px;
+    }
+    .input-controls .input-group-text {
+        width: 148px;
+        justify-content: center;
+    }
+    .input-controls .input-group-text {
+        border-radius: 0;
+    }
+    .input-controls #modify-color1 {
+        border-top-left-radius: 0.25rem;
+    }
+    .input-controls #modify-angle {
+        border-bottom-left-radius: 0.25rem;
+    }
+}

src/components/modify/modify.jsx

@@ -86,6 +86,8 @@ export default class Modify extends React.Component {
                                 value={this.state.HEX_1}
                                 onChange={(e) => { this.changeColor1(e) }}
                             />
+                        </InputGroup>
+                        <InputGroup>
                             <InputGroup.Prepend>
                                 <InputGroup.Text id="modify-color2">Color-2</InputGroup.Text>
                             </InputGroup.Prepend>
@@ -94,6 +96,8 @@ export default class Modify extends React.Component {
                                 value={this.state.HEX_2}
                                 onChange={(e) => { this.changeColor2(e) }}
                             />
+                        </InputGroup>
+                        <InputGroup className="angle-range">
                             <InputGroup.Prepend>
                                 <InputGroup.Text id="modify-angle">Angle</InputGroup.Text>
                             </InputGroup.Prepend>
@@ -105,6 +109,7 @@ export default class Modify extends React.Component {
                                 onChange={(e) => { this.changeAngle(e) }}
                             />
                             <FormControl
+                                className="angle-range-numeric"
                                 type="number"
                                 min="0"
                                 max="360"
@@ -139,4 +144,4 @@ export default class Modify extends React.Component {
             </div>
         );
     }
-}
+}