From 885374a706163c2e420d5ce74e447bd6c56a9214 Mon Sep 17 00:00:00 2001 From: Ekidoxx Date: Tue, 22 May 2018 14:30:14 +0200 Subject: [PATCH] Beginning of making UI more user friendly --- public/index.html | 2 +- src/Card.js | 4 ++-- src/SearchCategory.js | 6 +++--- src/index.scss | 38 +++++++++++++++++++------------------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/public/index.html b/public/index.html index e9fb75add..6655c26c8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/Card.js b/src/Card.js index 3d0175d58..9d654aec7 100644 --- a/src/Card.js +++ b/src/Card.js @@ -22,14 +22,14 @@ const Card = ({user}) => { } {links.github === '' ? '' : - + } {links.linkedin === '' ? '' : - + diff --git a/src/SearchCategory.js b/src/SearchCategory.js index 176d71efe..13897df9c 100644 --- a/src/SearchCategory.js +++ b/src/SearchCategory.js @@ -4,13 +4,13 @@ const SearchCategory = ({categoryChange}) => { return(
- Location +
- Name +
- Job Title +
) diff --git a/src/index.scss b/src/index.scss index 0ed0e1ce4..c17312343 100644 --- 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;