Merge pull request #70 from jackyzha0/visual-overhaul

5 files changed, 219 insertions, 0 deletions

diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
new file mode 100644
index 0000000..adb1536
--- /dev/null
+++ b/frontend/src/components/Inputs/Code.js
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from 'styled-components'
+import CharLimit from "../decorators/CharLimit";
+import Editor from 'react-simple-code-editor';
+import {Highlighter} from "../renderers/Code";
+import {CodeLike, Hover} from "../Common/mixins";
+
+const Wrapper = styled.div`
+  position: relative;
+`
+const EditorWrapper = styled(Editor)`
+  overflow: visible !important;
+  
+  & > * {
+    padding: 0 !important;
+    width: 100%;
+  }
+  
+  & pre, & code, & > textarea {
+    ${CodeLike}
+    min-height: 40vh;
+  }
+  
+  & pre {
+    z-index: -1 !important;
+  }
+  
+  & > textarea {
+    ${Hover}
+    padding: 0.6em !important;
+    outline: none !important;
+  }
+`
+
+export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
+  return (
+    <Wrapper>
+      <EditorWrapper
+        name="content"
+        readOnly={readOnly}
+        placeholder="Paste your text here"
+        value={content}
+        id={id}
+        required
+        highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
+        onValueChange={code => setContentCallback(code)}
+        padding={15}
+      />
+      <CharLimit
+        content={content}
+        maxLength={props.maxLength} />
+    </Wrapper>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
new file mode 100644
index 0000000..9fde6ed
--- /dev/null
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -0,0 +1,120 @@
+import Dropdown from "react-dropdown";
+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 "../Common/mixins";
+
+const StyledDropdown = styled(Dropdown)`
+  ${Border}
+  ${Rounded}
+  ${DropShadow}
+  ${InputLike}
+  cursor: pointer;
+  
+  & .Dropdown-root {
+    cursor: pointer;
+    
+    &:hover, &.is-open {
+      opacity: 1;
+    }
+  }
+  
+  & .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) {
+    props.onChange({
+      target: {
+        name: props.label,
+        value: option.label
+      }
+    });
+  }
+
+  return (
+    <Labelled
+      label={props.label}
+      id={props.id}
+      value={props.value}>
+      <StyledDropdown
+        options={props.options}
+        onChange={_onSelect}
+        value={props.value}
+        placeholder={props.placeholder}
+        id={props.id} />
+    </Labelled>
+  );
+}
+
+export const Expiry = (props) => {
+  const options = [
+    '5 years',
+    '1 year',
+    '1 month',
+    '1 week',
+    '1 day',
+    '1 hour',
+    '10 min',
+  ];
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder='1 week'
+      label='expiry'
+    />
+  );
+}
+
+export const Language = (props) => {
+  const options = Object.entries(LANGS).map((key, _) => ({
+    'value': key[1],
+    'label': key[0]
+  }))
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder='detect'
+      label='language'
+    />
+  );
+}
+
+export const Theme = (props) => {
+  const options = Object.entries(THEMES).map((key) => ({
+    'value': key[1],
+    'label': key[0]
+  }))
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder='atom'
+      label='theme'
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
new file mode 100644
index 0000000..099aae4
--- /dev/null
+++ b/frontend/src/components/Inputs/Password.js
@@ -0,0 +1,14 @@
+import React from "react";
+import {Labelled} from "../decorators/Labelled";
+import {Input} from "../Common/Input";
+
+export const Password = (props) => <Labelled label="password">
+  <Input
+    name="pass"
+    placeholder={props.placeholder ?? "add password"}
+    type="password"
+    autoComplete="off"
+    onChange={props.onChange}
+    value={props.value}
+    id={props.id} />
+</Labelled>
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js
new file mode 100644
index 0000000..600e653
--- /dev/null
+++ b/frontend/src/components/Inputs/Text.js
@@ -0,0 +1,25 @@
+import CharLimit from "../decorators/CharLimit";
+import React from "react";
+import {Labelled} from "../decorators/Labelled";
+import {Input} from "../Common/Input";
+
+export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => {
+  return (
+    <Labelled label={label} value={value}>
+      <Input
+        ref={ref}
+        name={label}
+        readOnly={readOnly}
+        placeholder="Title"
+        id={id}
+        type="text"
+        autoFocus={autoFocus}
+        autoComplete="off"
+        onChange={onChange}
+        value={value} />
+      <CharLimit
+        content={value}
+        maxLength={maxLength} />
+    </Labelled>
+  );
+})
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/index.js b/frontend/src/components/Inputs/index.js
new file mode 100644
index 0000000..b16deb3
--- /dev/null
+++ b/frontend/src/components/Inputs/index.js
@@ -0,0 +1,6 @@
+import {Code} from './Code';
+import {Expiry, Language, Theme} from "./Dropdown";
+import {Password} from "./Password";
+import {Text} from "./Text";
+
+export {Code, Expiry, Language, Theme, Password, Text};
\ No newline at end of file