• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• front-entenda-direito-master
  • .eslintignore
  • src
    • App.tsx
    • utils
      • getValidationErrors.ts
    • services
      • api.ts
    • pages
      • ForgotPassword
        • index.tsx
        • styles.ts
      • ResetPassword
        • index.tsx
        • styles.ts
      • Profile
        • index.tsx
        • styles.ts
      • SignIn
        • index.tsx
        • styles.ts
      • SignUp
        • index.tsx
        • styles.ts
      • Dictionary
        • index.tsx
        • styles.ts
        • LegalTerm
          • index.tsx
          • PopularTerm
            • index.tsx
            • styles.ts
      • Search
        • index.tsx
        • styles.ts
        • Process
          • Progress
            • index.tsx
            • styles.ts
          • index.tsx
      • Dashboard
        • index.tsx
        • styles.ts
    • index.tsx
    • hooks
      • auth.tsx
      • toastModal.tsx
      • index.tsx
      • toast.tsx
    • components
      • Input
        • index.tsx
        • styles.ts
      • ToastContainer
        • index.tsx
        • styles.ts
        • Toast
          • index.tsx
          • styles.ts
      • ToastContainerModal
        • index.tsx
        • styles.ts
        • ToastModal
          • index.tsx
          • styles.ts
      • Tooltip
        • index.tsx
        • styles.ts
      • Button
        • index.tsx
        • styles.ts
    • setupTests.ts
    • styles
      • global.ts
    • react-app-env.d.ts
    • routes
      • index.tsx
      • Route.tsx
    • assets
  • tmp
    • .gitkeep
  • public
    • index.html
  • .eslintrc.json
  • LICENSE
  • .editorconfig
  • README.md
  • prettier.config.js
  • package.json
  • tsconfig.json
  • .gitignore

import styled from 'styled-components';
import { shade } from 'polished';

export const Container = styled.div`
  height: 100vh;

  > header {
    height: 144px;
    background: ${shade(0.2, '#0d0c3b')};

    display: flex;
    align-items: center;

    div {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;

      svg {
        color: #ffbd4a;
        width: 24px;
        height: 24px;
      }
    }
  }
`;

export const Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -174px auto 0;

  width: 100%;

  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;

    h1 {
      margin-bottom: 24px;
      font-size: 20px;
      text-align: left;
    }

    a {
      color: #f4ede8;
      display: block;
      margin-top: 24px;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: ${shade(0.2, '#f4ede8')};
      }
    }
  }
`;

export const AvatarInput = styled.div`
  margin-bottom: 32px;
  position: relative;
  align-self: center;

  img {
    width: 186px;
    height: 186px;
    border-radius: 50%;
  }

  label {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #ffbd4a;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s;

    display: flex;
    align-items: center;
    justify-content: center;

    input {
      display: none;
    }

    svg {
      width: 20px;
      height: 20px;
      color: #312e38;
    }

    &:hover {
      background: ${shade(0.2, '#ffbd4a')};
    }
  }
`;