Beginning of making UI more user friendly

DarrnyH · May 22, 2018 · 885374a · 885374a
1 parent 2218b65
commit 885374a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

diff --git a/src/Card.js b/src/Card.js
@@ -22,14 +22,14 @@ const Card = ({user}) => {
             </a>
           }
           {links.github === '' ? '' :
-            <a href={links.github} className="w2 h2 ma2" title="Github" target="_blank" rel="noopener noreferrer">
+            <a href={links.github} className="w2 h2 ma2" title="GitHub profile" target="_blank" rel="noopener noreferrer">
               <svg className="w2 h2" viewBox="0 0 24 24">
                 <path d="M20.38,8.53C20.54,8.13 21.06,6.54 20.21,4.39C20.21,4.39 18.9,4 15.91,6C14.66,5.67 13.33,5.62 12,5.62C10.68,5.62 9.34,5.67 8.09,6C5.1,3.97 3.79,4.39 3.79,4.39C2.94,6.54 3.46,8.13 3.63,8.53C2.61,9.62 2,11 2,12.72C2,19.16 6.16,20.61 12,20.61C17.79,20.61 22,19.16 22,12.72C22,11 21.39,9.62 20.38,8.53M12,19.38C7.88,19.38 4.53,19.19 4.53,15.19C4.53,14.24 5,13.34 5.8,12.61C7.14,11.38 9.43,12.03 12,12.03C14.59,12.03 16.85,11.38 18.2,12.61C19,13.34 19.5,14.23 19.5,15.19C19.5,19.18 16.13,19.38 12,19.38M8.86,13.12C8.04,13.12 7.36,14.12 7.36,15.34C7.36,16.57 8.04,17.58 8.86,17.58C9.69,17.58 10.36,16.58 10.36,15.34C10.36,14.11 9.69,13.12 8.86,13.12M15.14,13.12C14.31,13.12 13.64,14.11 13.64,15.34C13.64,16.58 14.31,17.58 15.14,17.58C15.96,17.58 16.64,16.58 16.64,15.34C16.64,14.11 16,13.12 15.14,13.12Z" />
               </svg>
             </a>
           }
           {links.linkedin === '' ? '' :
-            <a href={links.linkedin} className="w2 h2 ma2" title="LinkedIn" target="_blank" rel="noopener noreferrer">
+            <a href={links.linkedin} className="w2 h2 ma2" title="LinkedIn profile" target="_blank" rel="noopener noreferrer">
               <svg className="w2 h2" viewBox="0 0 24 24">
                 <path d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z" />
               </svg>

diff --git a/src/SearchCategory.js b/src/SearchCategory.js
@@ -4,13 +4,13 @@ const SearchCategory = ({categoryChange}) => {
   return(
     <div className="dn db-l SearchCategory relative ma0 pa0 fr">
       <div className="radio-box pa0 di">
-        <input type="radio" name="category" value="location" onChange={categoryChange}/> Location
+        <input type="radio" name="category" value="location" id="category1" onChange={categoryChange}/> <label htmlFor="category1">Location</label>
       </div>
       <div className="radio-box pa0 di">
-        <input type="radio" name="category" value="name" defaultChecked onChange={categoryChange}/> Name
+        <input type="radio" name="category" value="name" id="category2" defaultChecked onChange={categoryChange}/> <label htmlFor="category2">Name</label>
       </div>
       <div className="radio-box pa0 di">
-        <input type="radio" name="category" value="job title" onChange={categoryChange}/> Job Title
+        <input type="radio" name="category" value="job title" id="category3" onChange={categoryChange}/> <label htmlFor="category3">Job Title</label>
       </div>
     </div>
   )

diff --git a/src/index.scss b/src/index.scss
@@ -56,6 +56,7 @@ $colors: (
   transition: inherit;
 }
 svg {
+  fill: currentColor;
   transition: fill 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
@@ -86,29 +87,24 @@ header {
     transform: translateY(-50%);
   }
 
-  #title {
+  #title:hover {
 
-    svg {
-      fill: #FFFFFF;
+    span:nth-child(2) {
+      color: $color--secondary;
     }
-
-    &:hover {
-
-      span:nth-child(2) {
-        color: $color--secondary;
-      }
-      span:nth-child(3) {
-        color: currentColor;
-      }
-
+    span:nth-child(3) {
+      color: currentColor;
     }
 
   }
 
   .SearchCategory .radio-box {
 
-    input {
+    input,
+    label {
       cursor: pointer;
+    }
+    input {
       visibility: hidden;
       margin: 0 -0.05rem 0 0.6rem;
     }
@@ -146,10 +142,6 @@ header {
 
     margin: 0 0.6rem 0 0;
 
-    svg {
-      fill: currentColor;
-    }
-
     input {
       width: 11rem;
       padding: 0.3rem;
@@ -211,6 +203,11 @@ main {
     .main a {
       position: relative;
       z-index: 1;
+
+      svg {
+        fill: #000000;
+      }
+
     }
     .main a::before {
       content: "";
@@ -240,7 +237,7 @@ main {
       background-color: $color--additional1;
     }
 
-    .main a:hover {
+    .main a:hover svg {
       fill: #FFFFFF;
     }
     .main a:hover::before {
@@ -296,10 +293,13 @@ footer {
 }
 
 
+
 .custom--o-95 {
   opacity: 0.95;
 }
 
+
+
 .custom--shadow-0,
 .custom--shadow-hover-0:hover {
   box-shadow: none;