Merge pull request #2888 from brave/brave-ui-sync

Sync: Move from brave-ui to brave-core

Author: cezaraugusto

components/brave_sync/ui/brave_sync.tsx

@@ -7,7 +7,7 @@ import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
 // Components
-import App from './components/app'
+import App from './containers/app'
 
 // Utils
 import store from './store'

components/brave_sync/ui/components/grid/index.ts

@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'brave-ui/theme'
+
+export const SectionBlock = styled<{}, 'section'>('section')`
+  margin: 15px 0 40px;
+`
+
+export const EnabledContentButtonGrid = styled<{}, 'footer'>('footer')`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 5px;
+  margin: 10px 5px 0;
+`
+
+export const SettingsToggleGrid = styled<{}, 'footer'>('footer')`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 5px;
+  align-items: center;
+  margin: 15px 0 0;
+`
+
+export const DisabledContentButtonGrid = styled<{}, 'footer'>('footer')`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 10px;
+  margin: 15px 0 0;
+`
+
+interface TableGridProps {
+  isDeviceTable?: boolean
+}
+
+export const TableGrid = styled<TableGridProps, 'div'>('div')`
+  align-items: center;
+  display: grid;
+  grid-template-columns: ${p => p.isDeviceTable ? '1fr' : '200px auto'};
+  grid-template-rows: auto;
+  grid-gap: ${p => p.isDeviceTable ? '0' : '50px'};
+`
+
+export const TableButtonGrid = styled<{}, 'div'>('div')`
+  display: grid;
+  grid-template-rows: auto;
+  grid-gap: 15px;
+  grid-template-columns: 2fr 1fr 1fr;
+`

components/brave_sync/ui/components/images/add_icon.svg

@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'brave-ui/theme'
+
+import StartImageUrl from './start_icon.svg'
+import DefaultImageUrl from './default_icon.svg'
+import AddImageUrl from './add_icon.svg'
+import RemoveImageUrl from './remove_icon.svg'
+import DesktopImageUrl from './sync_computer.svg'
+import MobileImageUrl from './sync_devices.svg'
+import MobileHandImageUrl from './sync_hand.svg'
+
+const iconStyles = `
+  margin-top: 3px;
+  height: 60px;
+`
+
+const deviceStyles = `
+  margin-bottom: 10px;
+  height: 100px;
+`
+
+export const SyncStartIcon = styled<{}, 'img'>('img').attrs({ src: StartImageUrl })`
+  max-width: 100%;
+`
+export const SyncDefaultIcon = styled<{}, 'img'>('img').attrs({ src: DefaultImageUrl })`${iconStyles}`
+export const SyncAddIcon = styled<{}, 'img'>('img').attrs({ src: AddImageUrl })`${iconStyles}`
+export const SyncRemoveIcon = styled<{}, 'img'>('img').attrs({ src: RemoveImageUrl })`${iconStyles}`
+export const SyncDesktopIcon = styled<{}, 'img'>('img').attrs({ src: DesktopImageUrl })`${deviceStyles}`
+export const SyncMobileIcon = styled<{}, 'img'>('img').attrs({ src: MobileImageUrl })`${deviceStyles}`
+export const SyncMobilePicture = styled<{}, 'img'>('img').attrs({ src: MobileHandImageUrl })`
+  max-width: 100%;
+  height: 150px;
+  display: block;
+`
+
+interface QRCodeProps {
+  size: 'normal' | 'small'
+}
+
+export const QRCode = styled<QRCodeProps, 'img'>('img')`
+  display: block;
+  width: 200px;
+  padding: 30px;
+  border: 1px solid #C8C8D5;
+  max-width: 100%;
+`