Implement v2 redesign

chriskilinc · Nov 20, 2022 · b8803bc · b8803bc
1 parent 47a671f
commit b8803bc
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 62 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,24 @@
+:root {
+  --colorWhite: #FEFAE0;
+  --colorBlack: #283618;
+  --colorOrange: #DDA15E;
+  --background-color: var(--colorWhite);
+  --colorPrimary: var(--colorBlack);
+  --colorSecondary: var(--colorOrange);
+}
+
 .app {
   text-align: center;
-  padding-bottom: 1rem;
+  padding: 2rem 2rem;
+}
+
+.pigments header {
+  margin-bottom: 2rem;
+}
+
+.pigments h1 {
+  color: var(--colorSecondary);
+  margin: 0;
 }
 
 .playarea {
@@ -9,7 +27,7 @@
 }
 
 .container {
-  padding: 0 4rem;
+  padding: 0 2rem;
 }
 
 #file {
@@ -21,62 +39,71 @@ form {
   justify-content: flex-end;
 }
 
-.file-upload {
+.file-upload label {
   display: flex;
-  width: 17.5rem;
+  width: 10rem;
+  font-size: 1rem;
   justify-content: space-around;
-  border: 2px solid #cdd9e5;
-  font-family: psychedelic;
+  border: 6px solid var(--colorPrimary);
   font-family: 'Quicksand', sans-serif;
   font-weight: 400;
-  font-size: 32px;
-  border-radius: 12px;
+  border-radius: 2px;
   padding: 5px 8px;
   cursor: pointer;
 }
-.file-upload:hover, .file-upload:focus {
-  color: #fff;
-  border-color: #fff;
+.file-upload label:hover, .file-upload label:focus {
+  color: var(--colorSecondary);
+  border-color: var(--colorSecondary);
 }
 
+.file-upload img {
+  width: 1.25rem;
+}
 /* UPLOAD */
 
 .upload {
   flex: 1;
-  border-right: 2px solid #cdd9e5;
   text-align: right;
 }
 .upload .preview {
   margin-top: 2rem;
 }
 .upload .preview img {
   max-width: 100%;
-  max-height: 50vh;
 }
 
 /* SUMMERY */
 
 .summery {
   flex: 1;
-  text-align: left;
 }
 
 .summery .palette {
-  max-width: 25vw; /* TODO: Remake this in a prettier way */
+  margin-bottom: 2rem;
 }
 
 /* SWATCHES */
 
 .swatches {
+  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  gap: 0.25rem;
 }
 
 .swatch {
-  display: inline-flex;
-  flex-direction: column;
-  padding: 0.5rem;
-  /* flex: 1 1 33%; grow | shrink | basis */
+  display: flex;
+  flex: 1;
+  padding: 0.5rem 1.75rem;
+  border: 4px solid transparent;
+}
+.swatch:hover {
+  border-color: var(--colorBlack);
+  cursor: pointer;
+}
+.swatch.dominant {
+  width: 100%;
+  flex: unset;
 }
 
 .ball {
@@ -111,23 +138,33 @@ form {
     border: none;
   }
 
-  .summery .palette {
-    max-width: 50vw;
-    margin: auto;
+  .container {
+    padding: 0;
   }
 
   .file-upload  {
-    width: 10rem;
-    font-size: 1.25rem;
-    border-radius: 6px;
     align-items: center;
   }
 
-  .file-upload img {
-    width: 16px;
-  }
-
   form {
     justify-content: center;
   }
-}
+}
+
+@media only screen and (min-width: 1400px) {
+  .summery .container{
+    padding: 4.5rem 10rem;
+  }
+
+  .upload .preview img {
+    max-width: 33vw;
+    max-height: 50vh;
+  }
+}
+
+
+@media only screen and (min-width: 768px) {
+  .upload .preview img {
+    max-height: 50vh;
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -6,11 +6,13 @@ import ColorThief from 'colorthief'
 import rgbHex from "./utils/rgbHex";
 import rgbHsl from "./utils/rgbHsl";
 import changeHslLightness from "./utils/changeHslLightness";
+
+import { ColorInformation } from "./components/color-information/colorInformation"
 class App extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { file: '', imagePreviewUrl: '', dominantColor: '', displayInfoText: false, wrongFileFormat: false };
+    this.state = { file: '', imagePreviewUrl: '', dominantColor: '', displayInfoText: false, wrongFileFormat: false, selectedColor: null };
     this.fileInput = React.createRef();
   }
 
@@ -46,7 +48,8 @@ class App extends React.Component {
       dominant: dominantHex,
       palette: palette,
       displayInfoText: true,
-      wrongFileFormat: false
+      wrongFileFormat: false,
+      selectedColor: dominantHex,
     });
 
     window.dataLayer.push({ "event": "upload_image" });
@@ -71,43 +74,28 @@ class App extends React.Component {
   }
 
   render() {
-    let { imagePreviewUrl, dominant, palette, displayInfoText, wrongFileFormat } = this.state;
+    let { imagePreviewUrl, dominant, palette, displayInfoText, wrongFileFormat, selectedColor } = this.state;
 
     let $iconImg = (<img width="28" src={iconImg} />);
 
     let $imagePreview = null;
     if (imagePreviewUrl) {
       $imagePreview = (<img id="img-preview" src={imagePreviewUrl} />);
     } else {
-      $imagePreview = (<div className="previewText"><p></p></div>);
-    }
-
-    let $dominantColor = null;
-    if (dominant) {
-      $dominantColor = (
-        <div className="dominant">
-          <h3>Dominant Color</h3>
-          <div className="swatch">
-            <div className="ball" style={{ backgroundColor: dominant }} onClick={(e) => this.copyColor(dominant, e)}></div>
-            <p>{dominant}</p>
-          </div>
-        </div>);
+      $imagePreview = (<div className="previewText"><p>Choose an image to analyse color palette</p></div>);
     }
 
     let $palette = null;
-    if (palette && palette.length > 0) {
+    if (dominant && (palette && palette.length > 0)) {
       $palette = (
         <div className="palette">
-          <h3>Palette</h3>
           <div className="swatches">
+            <div className="swatch dominant" style={{ backgroundColor: dominant }} onClick={(e) => this.setState({ selectedColor: dominant })}></div>
             {palette.map(color =>
-              <div className="swatch" key={color}>
-                <div className="ball" style={{ backgroundColor: color }} onClick={(e) => this.copyColor(color, e)}></div>
-                <p>{color}</p>
-              </div>
+              <div className="swatch" key={color} style={{ backgroundColor: color }} onClick={(e) => this.setState({ selectedColor: color })}></div>
             )}
           </div>
-        </div>
+        </div >
       );
     }
 
@@ -127,10 +115,9 @@ class App extends React.Component {
         <div className="playarea">
           <section className="upload">
             <div className="container">
-              <h2>Upload</h2>
-              <form>
+              <form className="file-upload">
                 <input id="file" type="file" ref={this.fileInput} onChange={(e) => this.onFileChange(e)} />
-                <label className="file-upload" htmlFor="file">Choose Image {$iconImg}</label>
+                <label htmlFor="file">choose image {$iconImg}</label>
               </form>
               <div className="preview">
                 {$imagePreview}
@@ -140,13 +127,13 @@ class App extends React.Component {
 
           <section className="summery">
             <div className="container">
-              <h2>Summery</h2>
-              {$dominantColor}
               {$palette}
+              {selectedColor ? <ColorInformation color={this.state.selectedColor} /> : null}
             </div>
           </section>
         </div>
-        {$infoText}
+
+        {/* {$infoText} */}
         {$wrongFileFormat}
         <div className="links">
           <a href="https://www.chriskilinc.com" target="_blank" rel="dofollow">chriskilinc</a>

diff --git a/src/components/color-information/colorInformation.css b/src/components/color-information/colorInformation.css
@@ -0,0 +1,4 @@
+.color-information {
+    border: 6px solid transparent;
+    border-radius: 2px;
+}
diff --git a/src/components/color-information/colorInformation.js b/src/components/color-information/colorInformation.js
@@ -0,0 +1,13 @@
+import React from "react";
+import "./colorInformation.css";
+
+export const ColorInformation = (props) => {
+    let color = props.color;
+
+    return (
+        <div className="color-information" style={{ borderColor: color }}>
+            <p>{color}</p>
+        </div>
+
+    );
+};
diff --git a/src/components/index.js b/src/components/index.js
diff --git a/src/img/img2.svg b/src/img/img2.svg
diff --git a/src/index.css b/src/index.css
@@ -16,8 +16,8 @@
 
 
 body {
-  background-color: #22272e;
-  color: #cdd9e5;
+  background-color: var(--background-color);
+  color: var(--textColor);
   margin: 0;
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   monospace;