From 5e777145ec11e7464b914b77eb634cc2b1ad3198 Mon Sep 17 00:00:00 2001 From: Shalini-CEG Date: Tue, 6 Jul 2021 21:27:31 +0530 Subject: [PATCH 1/7] Modified styles --- src/services/api/loaded-services.js | 4 +-- src/styles/pages/home-page.js | 50 +++++++++++++++++------------ src/styles/themes/font-styles.js | 3 +- src/styles/widgets/widgets.js | 41 +++++++++++++---------- 4 files changed, 58 insertions(+), 40 deletions(-) diff --git a/src/services/api/loaded-services.js b/src/services/api/loaded-services.js index d4e95b4..2624a88 100644 --- a/src/services/api/loaded-services.js +++ b/src/services/api/loaded-services.js @@ -47,11 +47,11 @@ async function fetchResult(item) { return categories; case "subcategories": - if (subcategories.length === 0) await getApi(); + if (subcategories.length === 0) await getCategory(); return subcategories; case "home": - if (home.length === 0) await getHome("home"); + if (home.length === 0) await getHome(); return home; // case "profile": diff --git a/src/styles/pages/home-page.js b/src/styles/pages/home-page.js index b658829..187f05d 100644 --- a/src/styles/pages/home-page.js +++ b/src/styles/pages/home-page.js @@ -1,12 +1,13 @@ +import { Card } from "react-bootstrap"; import styled, { css } from "styled-components"; import { LightShade, Silver } from "../themes/color-theme"; -import { Slab } from "../themes/font-styles"; // Home page carousel styling -export const Title = styled.div` +export const TitleBox = styled.div` background-color: #000000bd; border: 10px solid ${LightShade}; + @media screen and (max-width: 450px) { display: none; } @@ -20,21 +21,8 @@ export const Main = styled.h3` } `; -// Grid styling -export const Caption = styled.div` - display: block; - margin: auto; - font-size: 18px; - font-family: ${Slab}; - color: white; - text-align: center; - text-transform: uppercase; - - @media screen and (max-width: 450px) { - font-size: 10px; - } -`; +// Grid styling export const Block = styled.div` display: flex; @@ -46,8 +34,8 @@ export const Block = styled.div` } &:hover { cursor: pointer; - box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2), - 0 6px 20px 0 rgba(0, 0, 0, 0.19); + box-shadow: 4px 4px 8px 0 rgb(210, 185, 225), + 0 6px 20px 0 rgb(210, 185, 225); } ${(props) => @@ -60,7 +48,7 @@ export const Block = styled.div` :hover { cursor: pointer; box-shadow: none; - transform: scale(1.1); + /* transform: scale(1.1); */ } `}; `; @@ -75,6 +63,28 @@ export const Image = styled.img` width: 100% max-width: none; border: 5px solid ${LightShade}; - /* object-fit: fill; */ `}; `; + +// Sale + +export const Cards = styled(Card)` + height: 270px; + width: 230px; + @media screen and (max-width: 450px) { + height: 160px; + width: 130px; + } + :hover { + cursor: pointer; + } +`; + +export const CardImg = styled(Card.Img)` + height: 190px; + /* width: 200px; */ + @media screen and (max-width: 450px) { + height: 90px; + /* width: 160px; */ + } +`; diff --git a/src/styles/themes/font-styles.js b/src/styles/themes/font-styles.js index 04cc607..2ff89c1 100644 --- a/src/styles/themes/font-styles.js +++ b/src/styles/themes/font-styles.js @@ -1,3 +1,4 @@ export const Lora = "Lora" -export const Slab = "Arbutus Slab" \ No newline at end of file +export const Slab = "Arbutus Slab" +export const Roboto = "Roboto" \ No newline at end of file diff --git a/src/styles/widgets/widgets.js b/src/styles/widgets/widgets.js index 7b29c85..e47107e 100644 --- a/src/styles/widgets/widgets.js +++ b/src/styles/widgets/widgets.js @@ -1,6 +1,6 @@ import styled, { css } from "styled-components"; -import { LightShade, DarkShade, Silver } from "../themes/color-theme"; -import { Lora } from "../themes/font-styles"; +import { LightShade, DarkShade } from "../themes/color-theme"; +import { Lora, Roboto } from "../themes/font-styles"; // Contains widgets like Button, Text box etc. export const Button = styled.button` @@ -27,29 +27,36 @@ export const Button = styled.button` // Text in caps export const Text = styled.div` - color: white; - font-family: ${Lora}; - text-align: center; - letter-spacing: 3px; - /* border: 4px solid ${Silver}; */ - /* padding: 60px 20px; */ - line-height: 1.6; - - font-size: 20px; + line-height: 1.8; + font-family: ${Roboto}; + text-align: ${(props) => props.align || "start"}; + letter-spacing: ${(props) => props.space || "5px"}; + font-size: ${(props) => props.size || "110%"}; + text-transform: ${(props) => props.case || "uppercase"}; + color: ${(props) => props.color || "black"}; + font-weight: ${(props) => props.thickness || "600"}; ${(props) => props.primary && css` - color: ${DarkShade}; - border: none; padding: 60px 0px; - font-weight: 400; - text-transform: uppercase; `}; + + ${(props) => + props.tags && + css` + display: block; + font-weight: 550; + margin: auto; + text-overflow: unset; + white-space: unset; + font-size: 18px; + `}; + @media screen and (max-width: 450px) { line-height: 1.3; - letter-spacing: 4px; - font-size: 7px; + letter-spacing: ${(props) => props.space || "4px"}; + font-size: 8px; padding: 20px 10px; } `; From c13e83ed6af2db7b668c6f5d29f5a31f300f236b Mon Sep 17 00:00:00 2001 From: Shalini-CEG Date: Tue, 6 Jul 2021 21:27:49 +0530 Subject: [PATCH 2/7] Color changed --- src/components/utils/header/NavBar.js | 47 +++++++++++++++------------ 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/utils/header/NavBar.js b/src/components/utils/header/NavBar.js index 6241fa4..c18dd23 100644 --- a/src/components/utils/header/NavBar.js +++ b/src/components/utils/header/NavBar.js @@ -21,11 +21,16 @@ const NavBar = ({ func }) => { func(); }; - let logged = localStorage.getItem("isLogged") + let logged = localStorage.getItem("isLogged"); return ( - - + + {/* @@ -35,7 +40,10 @@ const NavBar = ({ func }) => { -