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

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

• rocketredis-master
  • .github
    • workflows
      • tsc.yml
      • lint.yml
      • test.yml
      • build.yml
  • .eslintignore
  • src
    • App.tsx
    • utils
      • getValidationErrors.ts
      • windowBoundsController.ts
    • services
      • database
        • LoadKeysFromDatabase.ts
      • RedisConnection.ts
      • connection
        • UpdateConnectionService.ts
        • TestConnectionService.ts
        • CreateConnectionService.ts
        • DeleteConnectionService.ts
        • LoadConnectionDatabases.ts
      • key
        • LoadKeyContent.ts
    • hooks
      • useConfig.ts
      • useWindowSize.ts
    • screen
      • index.tsx
      • styles.ts
      • KeyList
        • index.tsx
        • styles.ts
        • SearchInput
          • index.tsx
          • styles.tsx
      • Header
        • index.tsx
        • styles.ts
      • KeyContent
        • index.tsx
        • styles.ts
      • ConnectionsList
        • index.tsx
        • Connection
          • index.tsx
          • styles.ts
        • styles.ts
        • ConnectionFormModal
          • index.tsx
          • styles.ts
        • DeleteConnectionModal
          • index.tsx
          • styles.ts
    • context
      • index.tsx
      • toast.tsx
    • components
      • Modal
        • index.tsx
        • styles.ts
      • ToastContainer
        • index.tsx
        • styles.ts
        • Toast
          • index.tsx
          • styles.ts
      • Form
        • Input
          • index.tsx
          • styles.ts
      • Button
        • index.tsx
        • styles.ts
      • EmptyContent
        • index.tsx
        • styles.ts
    • store
      • config.ts
      • connections.ts
    • global.d.ts
    • styles
      • GlobalStyle.ts
      • styled.d.ts
      • theme.ts
    • atoms
      • connections.ts
  • jest.config.js
  • i18n.ts
  • build
  • locales
    • en
      • translations.json
      • keyContent.json
      • connectionList.json
      • connectionForm.json
      • keyList.json
      • applicationMenu.json
      • deleteConnection.json
      • connection.json
  • .prettierrc
  • .eslintrc.json
  • LICENSE
  • commitlint.config.js
  • .npmrc
  • .editorconfig
  • babel.config.js
  • renovate.json
  • README.md
  • package.json
  • index.html
  • webpack
    • electron.webpack.js
    • react.webpack.js
  • tsconfig.json
  • .gitignore
  • electron
    • main.ts
  • docker-compose.yml

import styled, { keyframes } from 'styled-components'

import { defaultTheme } from '../../styles/theme'

interface ContainerProps {
  color: keyof typeof defaultTheme.colors
}

export const Container = styled.button<ContainerProps>`
  background: ${props => props.theme.colors[props.color]};
  border: 0;
  border-radius: 4px;
  color: #fff;

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

  font-weight: 600;
  font-size: 14px;

  cursor: pointer;
  transition: opacity 0.2s;

  svg {
    margin-right: 8px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5 !important;
  }

  &:hover {
    opacity: 0.8;
  }
`

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`

export const Loading = styled.div`
  height: 100%;

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

  animation: ${rotate} 2s linear infinite;

  svg {
    margin: 0;
    height: 16px;
    width: 16px;
  }
`