From 3e8500d466b641ef34c24f8b0de8163a44ba7a9e Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 22:17:18 -0800 Subject: refactoring css --- frontend/src/components/Inputs/Dropdown.js | 84 ++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 frontend/src/components/Inputs/Dropdown.js (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js new file mode 100644 index 0000000..c467408 --- /dev/null +++ b/frontend/src/components/Inputs/Dropdown.js @@ -0,0 +1,84 @@ +import Dropdown from "react-dropdown"; +import FloatingLabel from "../decorators/FloatingLabel"; +import React from "react"; +import {LANGS, THEMES} from "../renderers/Code"; +import {FlexChild} from "./shared"; + +const GenericDropdown = (props) => { + function _onSelect(option) { + props.onChange({ + target: { + name: props.label, + value: option.label + } + }); + } + + return ( + + + + + ); +} + +export const Expiry = (props) => { + const options = [ + '5 years', + '1 year', + '1 month', + '1 week', + '1 day', + '1 hour', + '10 min', + ]; + + return ( + + ); +} + +export const Language = (props) => { + const options = Object.entries(LANGS).map((key, _) => ({ + 'value': key[1], + 'label': key[0] + })) + + return ( + + ); +} + +export const Theme = (props) => { + const options = Object.entries(THEMES).map((key) => ({ + 'value': key[1], + 'label': key[0] + })) + + return ( + + ); +} \ No newline at end of file -- cgit v1.2.3 From 7a671bc96ef06df3da3d2dce3caca559f32c6627 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 23:12:28 -0800 Subject: text area styling --- frontend/src/components/Inputs/Dropdown.js | 57 +++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 8 deletions(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index c467408..a3f3b48 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -1,8 +1,50 @@ import Dropdown from "react-dropdown"; import FloatingLabel from "../decorators/FloatingLabel"; import React from "react"; +import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; -import {FlexChild} from "./shared"; +import {Labelled} from "./shared"; +import {Border, InputLike, Rounded} from "../Form/mixins"; + +const StyledDropdown = styled(Dropdown)` + ${Border} + ${Rounded} + ${InputLike} + cursor: pointer; + + & .Dropdown-root { + cursor: pointer; + + &:hover, &.is-open { + opacity: 1; + } + + & + label { + opacity: 1; + top: -0.1em; + } + } + + & .Dropdown-placeholder { + width: 5.5em; + } + + & .Dropdown-menu { + border-top: 1px solid ${p => p.theme.colors.text}; + margin-top: 0.5em; + bottom: auto; + } + + & .Dropdown-option { + margin-top: 0.5em; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + &:hover { + font-weight: 700; + opacity: 0.4; + } + } +` const GenericDropdown = (props) => { function _onSelect(option) { @@ -15,18 +57,17 @@ const GenericDropdown = (props) => { } return ( - - + - - + ); } -- cgit v1.2.3 From 6c974b237a9b7a8bd8f294d210157e19acf4c7fe Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 23:50:11 -0800 Subject: button styling --- frontend/src/components/Inputs/Dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index a3f3b48..9f7c246 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -1,14 +1,14 @@ import Dropdown from "react-dropdown"; -import FloatingLabel from "../decorators/FloatingLabel"; import React from "react"; import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; import {Labelled} from "./shared"; -import {Border, InputLike, Rounded} from "../Form/mixins"; +import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins"; const StyledDropdown = styled(Dropdown)` ${Border} ${Rounded} + ${DropShadow} ${InputLike} cursor: pointer; -- cgit v1.2.3 From cf59188dff4526a358d0386f8113f542e24fffc2 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 09:44:00 -0800 Subject: add more css mixins --- frontend/src/components/Inputs/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 9f7c246..1c2e0b7 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -2,7 +2,7 @@ import Dropdown from "react-dropdown"; import React from "react"; import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; -import {Labelled} from "./shared"; +import {Labelled} from "../decorators/Labelled"; import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins"; const StyledDropdown = styled(Dropdown)` -- cgit v1.2.3 From 57584eeb0f8ba7212c613e0c79c20ec3dd67efc5 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 13:54:03 -0800 Subject: code input style finalizations --- frontend/src/components/Inputs/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 1c2e0b7..851a692 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -102,7 +102,7 @@ export const Language = (props) => { ); -- cgit v1.2.3 From 37f05def31112563fd9d8f3b0c9bf8cebb607d86 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 15:44:54 -0800 Subject: fix modal zindex --- frontend/src/components/Inputs/Dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 851a692..27106dc 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -102,7 +102,7 @@ export const Language = (props) => { ); @@ -118,7 +118,7 @@ export const Theme = (props) => { ); -- cgit v1.2.3 From 75e8bdd2d4cdaefe28ed40a7735c993f98d15754 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 16:32:09 -0800 Subject: refactor form -> common --- frontend/src/components/Inputs/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 27106dc..7166681 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -3,7 +3,7 @@ import React from "react"; import styled from 'styled-components'; import {LANGS, THEMES} from "../renderers/Code"; import {Labelled} from "../decorators/Labelled"; -import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins"; +import {Border, DropShadow, InputLike, Rounded} from "../Common/mixins"; const StyledDropdown = styled(Dropdown)` ${Border} -- cgit v1.2.3 From 2c5bf739b8dfd8d3c7d341ab57ca8ea08fbc5f9e Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sat, 6 Mar 2021 17:07:28 -0800 Subject: fix button dropdown height --- frontend/src/components/Inputs/Dropdown.js | 5 ----- 1 file changed, 5 deletions(-) (limited to 'frontend/src/components/Inputs/Dropdown.js') diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js index 7166681..9fde6ed 100644 --- a/frontend/src/components/Inputs/Dropdown.js +++ b/frontend/src/components/Inputs/Dropdown.js @@ -18,11 +18,6 @@ const StyledDropdown = styled(Dropdown)` &:hover, &.is-open { opacity: 1; } - - & + label { - opacity: 1; - top: -0.1em; - } } & .Dropdown-placeholder { -- cgit v1.2.3