From ebe32c0f539fa257070874f85425ec721564d0d5 Mon Sep 17 00:00:00 2001 From: Olusola David Date: Wed, 25 Jul 2018 12:45:00 +0100 Subject: [PATCH] [Feature #159269831] Replace heart icon with a solid fill --- UI/css/style.css | 129 +++++++++++++++++++++-------------------- UI/img/heart-solid.svg | 1 + UI/index.html | 2 +- 3 files changed, 67 insertions(+), 65 deletions(-) create mode 100644 UI/img/heart-solid.svg diff --git a/UI/css/style.css b/UI/css/style.css index 5b8ca55..882aafe 100644 --- a/UI/css/style.css +++ b/UI/css/style.css @@ -1,5 +1,5 @@ .page { - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; padding: 0; margin: 0; background-color: #6865f9; @@ -78,7 +78,7 @@ display: none; width: 40px; height: 40px; - background: url('../img/menu-icon.svg'); + background: url("../img/menu-icon.svg"); } .nav__close-menu { display: none; @@ -87,7 +87,7 @@ top: 10px; width: 30px; height: 30px; - background: url('../img/close-icon.svg'); + background: url("../img/close-icon.svg"); background-repeat: no-repeat; } .hero { @@ -98,6 +98,7 @@ } .hero--home { height: auto; + padding-bottom: 70px; } .hero__title { font-size: 42px; @@ -109,7 +110,7 @@ color: #ffffff; font-size: 22px; line-height: 1.8; - font-weight: 400 + font-weight: 400; } .feature-list { background-color: #ffffff; @@ -122,7 +123,7 @@ .feature-list__title { text-align: center; color: #ffffff; - font-size: 39px; + font-size: 28px; font-weight: normal; } .feature-list__item { @@ -174,18 +175,18 @@ font-size: 1.35em; display: block; background: #6865f9; - padding: .75em 1em .75em 1.5em; + padding: 0.75em 1em 0.75em 1.5em; box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.05); margin: 0; font-weight: 200; text-align: center; } -.form__input, +.form__input, .form__textarea { display: block; margin: auto auto; margin-bottom: 2em; - padding: .5em 0; + padding: 0.5em 0; border: none; border-bottom: 1px solid #eaeaea; padding-bottom: 1.25em; @@ -199,9 +200,9 @@ display: inline-block; background: #00d1b2; border: none; - padding: .5em 2em; + padding: 0.5em 2em; color: white; - margin-right: .5em; + margin-right: 0.5em; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2); } .form__btn--submit:hover { @@ -216,16 +217,16 @@ } .form__btn--alternate { color: #00d1b2; - line-height: .5em; + line-height: 0.5em; position: relative; text-decoration: none; - font-size: .75em; + font-size: 0.75em; margin: 0; padding: 0; } .button--loading::after { - -webkit-animation: spinAround .5s infinite linear; - animation: spinAround .5s infinite linear; + -webkit-animation: spinAround 0.5s infinite linear; + animation: spinAround 0.5s infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -268,8 +269,8 @@ font-weight: normal; } .story-list__item .item__holder { - background: #ffffff; - height:300px; + background: #ffffff; + height: 300px; } .story-list__item { background-color: #000000; @@ -386,7 +387,7 @@ border-bottom: 8px solid #6865f9; } .profile__data { - margin-top: .6em; + margin-top: 0.6em; color: #81878b; } .profile__data .data__item { @@ -402,9 +403,9 @@ .data__item .span { display: block; text-transform: uppercase; - font-size: .5em; - margin-top: .6em; - font-weight:700; + font-size: 0.5em; + margin-top: 0.6em; + font-weight: 700; } .profile__title { @@ -423,7 +424,7 @@ } .profile__title .title__text { font-size: 1.2em; - margin-bottom: .5em; + margin-bottom: 0.5em; } .reminder-block { margin: 1.5em auto 0 auto; @@ -434,14 +435,14 @@ flex-direction: row; align-items: center; justify-content: space-between; - padding: .5em; + padding: 0.5em; } .switch { display: inline-block; font-size: 20px; /* 1 */ height: 1em; width: 2em; - background: #BDB9A6; + background: #bdb9a6; border-radius: 1em; } .switch__input { @@ -452,8 +453,8 @@ height: 1em; width: 1em; border-radius: 1em; - background: #FFF; - box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3); + background: #fff; + box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3); -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; @@ -465,35 +466,35 @@ background: #6865f9; } .story { - margin-left:auto; - margin-right:auto; + margin-left: auto; + margin-right: auto; padding: 50px 0; margin-top: 50px; background: #ffffff; width: 75%; } .story__date { - color:#666; - font-size:16px; + color: #666; + font-size: 16px; margin-left: 5px; - padding-left: 50px + padding-left: 50px; } .story__title { - color:#333; + color: #333; font-weight: bold; - font-size:35px; + font-size: 35px; margin-top: 5px; - padding-left: 50px + padding-left: 50px; } .story__content { - font-size:25px; + font-size: 25px; line-height: 1.8em; - padding: 0 50px + padding: 0 50px; } .story__toolbar { position: relative; - height:60px; - padding:0 50px; + height: 60px; + padding: 0 50px; margin-top: 40px; display: flex; flex-direction: row; @@ -505,60 +506,60 @@ align-items: center; } .story__toolbar .toolbar__edit-btn { - cursor:pointer; + cursor: pointer; margin-right: 10px; margin-top: 0px; } .story__toolbar .toolbar__delete-btn { background-color: transparent; - color:#3bbfaf !important; + color: #3bbfaf !important; } -.story__fav-icon{ +.story__fav-icon { margin-left: 40px; - height:40px; + height: 40px; display: flex; align-items: center; } .modal__cancel-btn { background-color: firebrick; - color:#fff; + color: #fff; } .icon { - width:25px; - color:#444; - transition: .2s ease-in; + width: 25px; + color: #444; + transition: 0.2s ease-in; } .icon--heart-active { - animation: scale_in .3s linear 1; + animation: scale_in 0.3s linear 1; color: red; } @keyframes scale_in { - 0%{ + 0% { transform: scale(1); } - 100%{ + 100% { transform: scale(1.1); } } .modal { - top:0; - left:0; + top: 0; + left: 0; overflow: auto; - display:none; - width:100%; + display: none; + width: 100%; height: 100%; - position:fixed; - background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.7)); + position: fixed; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); z-index: 1; } .modal__body { - width:38%; + width: 38%; text-align: center; - margin:200px auto; + margin: 200px auto; background-color: #fff; - height:200px; + height: 200px; padding: 0 15px; - box-shadow: 2px -1px 3px 2px rgba(255,255,255,0.5); + box-shadow: 2px -1px 3px 2px rgba(255, 255, 255, 0.5); } .modal__text { padding-top: 80px; @@ -599,7 +600,7 @@ display: block; } .hero--home { - margin-bottom: 30px; + margin-bottom: 50px; } .hero__title { font-size: 40px; @@ -637,7 +638,7 @@ } .story-list { padding: 40px 0px 40px 5%; - width: 75% + width: 75%; } .story-list__title { margin-top: 50px; @@ -647,13 +648,13 @@ } .story__edit-btn, .story__delete-btn { - height:30px; - width:80px; + height: 30px; + width: 80px; } .icon { margin-top: 3px; } .modal__body { - width:80%; + width: 80%; } -} \ No newline at end of file +} diff --git a/UI/img/heart-solid.svg b/UI/img/heart-solid.svg new file mode 100644 index 0000000..833a517 --- /dev/null +++ b/UI/img/heart-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/UI/index.html b/UI/index.html index a8e0104..5c1c3ff 100644 --- a/UI/index.html +++ b/UI/index.html @@ -72,7 +72,7 @@

Privacy

- fav-icon + fav-icon

Favorites

Easily find your favorite memories and be happy again