From 71ae7c4a2dcf8dc8e7a6cf378207d3f9480e44e2 Mon Sep 17 00:00:00 2001 From: johndiddles Date: Sat, 4 Sep 2021 14:23:36 +0100 Subject: [PATCH 1/3] adjusted components to fit design on figma and added categories section --- client/.gitignore | 1 + client/src/assets/giphy.png | Bin 1018 -> 4046 bytes .../components/Apps/Giphy/buttons/button.css | 10 +++++++-- .../components/Apps/Giphy/buttons/button.js | 2 +- .../Apps/Giphy/description/Description.js | 11 +++++++++ .../descriptionActions/descriptionAction.css | 21 +++++++++++++++++- .../descriptionActions/descriptionAction.js | 14 +++++++++++- .../src/components/Apps/Giphy/logo/logo.css | 2 +- .../Giphy/main-giphy-layout/main-layout.css | 1 + 9 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 client/src/components/Apps/Giphy/description/Description.js diff --git a/client/.gitignore b/client/.gitignore index c4890e18..db24db7b 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -10,6 +10,7 @@ # production /build +.vercel .package.lock. diff --git a/client/src/assets/giphy.png b/client/src/assets/giphy.png index 7622dd2193364f35fbe26c21271ba5eca7db3ff9..4a0398216c03bf6479934187495e283dd4e66b81 100644 GIT binary patch literal 4046 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 literal 1018 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+CxBFGfKQ0)e<1iX^Z$(A|7mIe zU%mSHci!i}^Zx&x|NqgW|KGkb|C%ZGd*S~XGyZ@5`v1w3|8L*^&&c?{ef$5(lTW7g z9ZBvzn$i~_)$S!;=Plllqq!+fX-&HF+6AuvXPWAM7suR$^mvx z2F3@jJgc*RiiKuQW%xILaZUeCd6onwi08oW`a+6FD};`2QV-N+oWZb6nt_Q-e=$Iv z2R48jW}p~I0f&XuSZ5?IageTT%@cRoCE=TO)~(u-^?>1;)8p;T2Jq-7(U}Z*fDQBR W=R9paw=~;9iacHYT-G@yGywp+VcTl} diff --git a/client/src/components/Apps/Giphy/buttons/button.css b/client/src/components/Apps/Giphy/buttons/button.css index 4e042621..cd17d54a 100644 --- a/client/src/components/Apps/Giphy/buttons/button.css +++ b/client/src/components/Apps/Giphy/buttons/button.css @@ -20,8 +20,14 @@ .whiteBtn { background-color: white; - color: #009B69; - border: 1px solid #009B69; + color: #767676; + border: 1px solid #767676; + width: fit-content; + padding: 4px 10px; + font-size: 12px; + font-weight: 400; + margin: 2px 0; + border-radius: 4px; } .whiteBtn:hover{ diff --git a/client/src/components/Apps/Giphy/buttons/button.js b/client/src/components/Apps/Giphy/buttons/button.js index 2e3bf545..17128294 100644 --- a/client/src/components/Apps/Giphy/buttons/button.js +++ b/client/src/components/Apps/Giphy/buttons/button.js @@ -12,7 +12,7 @@ export const GreenBtn = (props)=>{ export const WhiteBtn = (props)=>{ return ( - ) diff --git a/client/src/components/Apps/Giphy/description/Description.js b/client/src/components/Apps/Giphy/description/Description.js new file mode 100644 index 00000000..aaf111f3 --- /dev/null +++ b/client/src/components/Apps/Giphy/description/Description.js @@ -0,0 +1,11 @@ +import React from 'react' + +const Description = () => { + return ( +
+

Giphy

+
+ ) +} + +export default Description diff --git a/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.css b/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.css index 05f88f30..068d1446 100644 --- a/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.css +++ b/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.css @@ -3,6 +3,25 @@ width: 240px; } -.action-section .btn-wrappers { +.action-section .btn-wrapper { margin: 10px auto; + border-bottom: 1px solid #C1C1C1; + padding-bottom: 1em; + margin-bottom: 1.5em; +} + +.action-section .learn { + padding: 0.3em 0; +} +.action-section .categories-section { + width: 100%; + margin: 0.5em auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} +.action-section .categories-section .categoryBtns { + margin: 10px 0; + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.js b/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.js index 0aaa4d26..130f8216 100644 --- a/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.js +++ b/client/src/components/Apps/Giphy/descriptionActions/descriptionAction.js @@ -1,3 +1,5 @@ +import { Link } from 'react-router-dom'; + import { GreenBtn, WhiteBtn } from '../buttons/button'; import Logo from '../logo/logo'; @@ -9,7 +11,17 @@ const DescriptionAction = () => {
Add to Zuri Chat - Learn more +
+
+ Learn more & Support +
+
+

Categories

+
+ Social & fun + Essential Apps +
+
); diff --git a/client/src/components/Apps/Giphy/logo/logo.css b/client/src/components/Apps/Giphy/logo/logo.css index bb17a6d9..004f02c2 100644 --- a/client/src/components/Apps/Giphy/logo/logo.css +++ b/client/src/components/Apps/Giphy/logo/logo.css @@ -1,5 +1,5 @@ .logo-wrapper { - background: white; + background: #242424; border-radius: 8px; width: 100%; height: 220px; diff --git a/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css b/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css index b74577bd..aeef9305 100644 --- a/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css +++ b/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css @@ -6,6 +6,7 @@ .main-side-section { width: 100%; + padding: 0.5em 2em; color: black; } From a7d6c1ea154b977869b8a3ee9fd35ddecf73db3e Mon Sep 17 00:00:00 2001 From: johndiddles Date: Sat, 4 Sep 2021 15:12:01 +0100 Subject: [PATCH 2/3] adjusted components to fit design on figma and added categories section --- client/src/components/Apps/Giphy/buttons/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Apps/Giphy/buttons/button.css b/client/src/components/Apps/Giphy/buttons/button.css index cd17d54a..07e1665d 100644 --- a/client/src/components/Apps/Giphy/buttons/button.css +++ b/client/src/components/Apps/Giphy/buttons/button.css @@ -31,6 +31,6 @@ } .whiteBtn:hover{ - background: rgb(241, 241, 241); + background: rgb(240, 240, 240); transition: 0.2s; } \ No newline at end of file From 22af504cc4a2d2d5f1ed3673e709800b0f66d338 Mon Sep 17 00:00:00 2001 From: johndiddles Date: Sat, 4 Sep 2021 15:21:58 +0100 Subject: [PATCH 3/3] adjusted components to fit design on figma and added categories section --- .../components/Apps/Giphy/main-giphy-layout/main-layout.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css b/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css index aeef9305..f5377b68 100644 --- a/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css +++ b/client/src/components/Apps/Giphy/main-giphy-layout/main-layout.css @@ -1,8 +1,3 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} .main-side-section { width: 100%;