Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

discord-form

v0.0.2arrow_drop_down
v0.0.2
v0.0.1
STATUS
Processing
DOWNLOADS
26
VISIBILITY
Public
PUBLISHED
11 months ago
SIZE
19 KB
1 contributor
Install discord-form as a package?
Copied
npm i @bit/snimmagadda1.discord-login-form.discord-form
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
DiscordForm.js
93 Lines(81 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React from "react";
import styled from "styled-components";
import qr from "./qr.png";
import GamerForm from "./styled/GamerForm";
import GamerInput from "./styled/GamerInput";
import QRStyles from "./styled/QRStyles";
import { ThemeProvider } from "styled-components";

const theme = {
  colors: {
    muted: "#B9BBBE",
    blue: "#7289da",
  },
};

const Container = styled.div`
  display: flex;
  background-color: #363a3e;
  color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);

  @font-face {
    font-family: catamaran;
    src: url("./Catamaran-Regular.tff");
  }
  font-family: catamaran, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  line-height: 20px;

  ${GamerInput}:first-of-type {
    margin-top: 20px;
  }

  .vert-sep {
    margin: 0 16px;
  }

  a {
    color: ___CSS_1___;
    font-size: 13px;
    font-weight: 500;
  }

  @media (min-width: 830px) {
    min-width: 784px;
  }
`;
// test

class DiscordForm extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Container>
          <GamerForm>
            <fieldset>
              <h3>Welcome back!</h3>
              <h4>We're so excited to see you again!</h4>
              <GamerInput>
                <label htmlFor="ephone">EMAIL OR PHONE NUMBER</label>
                <input type="text" name="ephone" id="ephone"></input>
              </GamerInput>
              <GamerInput>
                <label htmlFor="password">PASSWORD</label>
                <input type="password" name="password" id="password"></input>
                <a>Forgot your password?</a>
              </GamerInput>
              <button type="submit">
                <div>Login</div>
              </button>
            </fieldset>
          </GamerForm>

          <div class="vert-sep"></div>

          <QRStyles>
            <div className="qrMask">
              <img src={qr}></img>
            </div>
            <h3>Log in with QR Code</h3>
            <h4>
              Scan this with the{" "}
              <span className="boldDescription">Discord mobile app</span> to log
              in instantly.
            </h4>
          </QRStyles>
        </Container>
      </ThemeProvider>
    );
  }
}

export default DiscordForm;
Help and resources