style(dashboard-v2): update prettier config
This commit is contained in:
parent
2f428b8e04
commit
0d108a8b82
|
@ -2,5 +2,5 @@ module.exports = {
|
||||||
globals: {
|
globals: {
|
||||||
__PATH_PREFIX__: true,
|
__PATH_PREFIX__: true,
|
||||||
},
|
},
|
||||||
extends: 'react-app',
|
extends: "react-app",
|
||||||
}
|
};
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
{
|
{
|
||||||
"semi": false,
|
|
||||||
"singleQuote": true,
|
|
||||||
"printWidth": 120
|
"printWidth": 120
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import * as React from 'react'
|
import * as React from "react";
|
||||||
import '@fontsource/sora/300.css' // light
|
import "@fontsource/sora/300.css"; // light
|
||||||
import '@fontsource/sora/400.css' // normal
|
import "@fontsource/sora/400.css"; // normal
|
||||||
import '@fontsource/sora/500.css' // medium
|
import "@fontsource/sora/500.css"; // medium
|
||||||
import '@fontsource/sora/600.css' // semibold
|
import "@fontsource/sora/600.css"; // semibold
|
||||||
import '@fontsource/source-sans-pro/400.css' // normal
|
import "@fontsource/source-sans-pro/400.css"; // normal
|
||||||
import '@fontsource/source-sans-pro/600.css' // semibold
|
import "@fontsource/source-sans-pro/600.css"; // semibold
|
||||||
import './src/styles/global.css'
|
import "./src/styles/global.css";
|
||||||
|
|
||||||
export function wrapPageElement({ element, props }) {
|
export function wrapPageElement({ element, props }) {
|
||||||
const Layout = element.type.Layout ?? React.Fragment
|
const Layout = element.type.Layout ?? React.Fragment;
|
||||||
return <Layout {...props}>{element}</Layout>
|
return <Layout {...props}>{element}</Layout>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,28 +4,28 @@ module.exports = {
|
||||||
siteUrl: `https://www.yourdomain.tld`,
|
siteUrl: `https://www.yourdomain.tld`,
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
'gatsby-plugin-image',
|
"gatsby-plugin-image",
|
||||||
'gatsby-plugin-react-helmet',
|
"gatsby-plugin-react-helmet",
|
||||||
'gatsby-plugin-sharp',
|
"gatsby-plugin-sharp",
|
||||||
'gatsby-transformer-sharp',
|
"gatsby-transformer-sharp",
|
||||||
'gatsby-plugin-postcss',
|
"gatsby-plugin-postcss",
|
||||||
{
|
{
|
||||||
resolve: 'gatsby-source-filesystem',
|
resolve: "gatsby-source-filesystem",
|
||||||
options: {
|
options: {
|
||||||
name: 'images',
|
name: "images",
|
||||||
path: './src/images/',
|
path: "./src/images/",
|
||||||
},
|
},
|
||||||
__key: 'images',
|
__key: "images",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-alias-imports`,
|
resolve: `gatsby-plugin-alias-imports`,
|
||||||
options: {
|
options: {
|
||||||
alias: {
|
alias: {
|
||||||
// Allows npm link-ing skynet-storybook during development.
|
// Allows npm link-ing skynet-storybook during development.
|
||||||
'styled-components': './node_modules/styled-components',
|
"styled-components": "./node_modules/styled-components",
|
||||||
},
|
},
|
||||||
extensions: ['js'],
|
extensions: ["js"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [require('tailwindcss'), require('autoprefixer')],
|
plugins: [require("tailwindcss"), require("autoprefixer")],
|
||||||
}
|
};
|
||||||
|
|
|
@ -1,28 +1,28 @@
|
||||||
import * as React from 'react'
|
import * as React from "react";
|
||||||
import { Link } from 'gatsby'
|
import { Link } from "gatsby";
|
||||||
|
|
||||||
// styles
|
// styles
|
||||||
const pageStyles = {
|
const pageStyles = {
|
||||||
color: '#232129',
|
color: "#232129",
|
||||||
padding: '96px',
|
padding: "96px",
|
||||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||||
}
|
};
|
||||||
const headingStyles = {
|
const headingStyles = {
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
marginBottom: 64,
|
marginBottom: 64,
|
||||||
maxWidth: 320,
|
maxWidth: 320,
|
||||||
}
|
};
|
||||||
|
|
||||||
const paragraphStyles = {
|
const paragraphStyles = {
|
||||||
marginBottom: 48,
|
marginBottom: 48,
|
||||||
}
|
};
|
||||||
const codeStyles = {
|
const codeStyles = {
|
||||||
color: '#8A6534',
|
color: "#8A6534",
|
||||||
padding: 4,
|
padding: 4,
|
||||||
backgroundColor: '#FFF4DB',
|
backgroundColor: "#FFF4DB",
|
||||||
fontSize: '1.25rem',
|
fontSize: "1.25rem",
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
}
|
};
|
||||||
|
|
||||||
// markup
|
// markup
|
||||||
const NotFoundPage = () => {
|
const NotFoundPage = () => {
|
||||||
|
@ -31,13 +31,13 @@ const NotFoundPage = () => {
|
||||||
<title>Not found</title>
|
<title>Not found</title>
|
||||||
<h1 style={headingStyles}>Page not found</h1>
|
<h1 style={headingStyles}>Page not found</h1>
|
||||||
<p style={paragraphStyles}>
|
<p style={paragraphStyles}>
|
||||||
Sorry{' '}
|
Sorry{" "}
|
||||||
<span role="img" aria-label="Pensive emoji">
|
<span role="img" aria-label="Pensive emoji">
|
||||||
😔
|
😔
|
||||||
</span>{' '}
|
</span>{" "}
|
||||||
we couldn’t find what you were looking for.
|
we couldn’t find what you were looking for.
|
||||||
<br />
|
<br />
|
||||||
{process.env.NODE_ENV === 'development' ? (
|
{process.env.NODE_ENV === "development" ? (
|
||||||
<>
|
<>
|
||||||
<br />
|
<br />
|
||||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||||
|
@ -48,7 +48,7 @@ const NotFoundPage = () => {
|
||||||
<Link to="/">Go home</Link>.
|
<Link to="/">Go home</Link>.
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default NotFoundPage
|
export default NotFoundPage;
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import * as React from 'react'
|
import * as React from "react";
|
||||||
|
|
||||||
// markup
|
// markup
|
||||||
const FilesPage = () => {
|
const FilesPage = () => {
|
||||||
return <>FILES</>
|
return <>FILES</>;
|
||||||
}
|
};
|
||||||
|
|
||||||
export default FilesPage
|
export default FilesPage;
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import * as React from 'react'
|
import * as React from "react";
|
||||||
|
|
||||||
// markup
|
// markup
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
return <>Dashboard</>
|
return <>Dashboard</>;
|
||||||
}
|
};
|
||||||
|
|
||||||
export default IndexPage
|
export default IndexPage;
|
||||||
|
|
|
@ -1,57 +1,57 @@
|
||||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||||
const plugin = require('tailwindcss/plugin')
|
const plugin = require("tailwindcss/plugin");
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
primary: { light: '#33D17E', DEFAULT: '#00c65e' },
|
primary: { light: "#33D17E", DEFAULT: "#00c65e" },
|
||||||
warning: '#ffd567',
|
warning: "#ffd567",
|
||||||
error: '#ED5454',
|
error: "#ED5454",
|
||||||
palette: {
|
palette: {
|
||||||
100: '#f5f7f7',
|
100: "#f5f7f7",
|
||||||
200: '#d4dddb',
|
200: "#d4dddb",
|
||||||
300: '#9e9e9e',
|
300: "#9e9e9e",
|
||||||
400: '#555555',
|
400: "#555555",
|
||||||
500: '#242424',
|
500: "#242424",
|
||||||
600: '#0d0d0d',
|
600: "#0d0d0d",
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
screens: {
|
screens: {
|
||||||
sm: '640px',
|
sm: "640px",
|
||||||
md: '768px',
|
md: "768px",
|
||||||
lg: '1024px',
|
lg: "1024px",
|
||||||
xl: '1440px',
|
xl: "1440px",
|
||||||
},
|
},
|
||||||
backgroundColor: (theme) => ({ ...theme('colors'), ...colors }),
|
backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||||
borderColor: (theme) => ({ ...theme('colors'), ...colors }),
|
borderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||||
textColor: (theme) => ({ ...theme('colors'), ...colors }),
|
textColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||||
placeholderColor: (theme) => ({ ...theme('colors'), ...colors }),
|
placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Sora', ...defaultTheme.fontFamily.sans],
|
sans: ["Sora", ...defaultTheme.fontFamily.sans],
|
||||||
content: ['Source\\ Sans\\ Pro', ...defaultTheme.fontFamily.sans],
|
content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
|
||||||
},
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
tab: ['18px', '28px'],
|
tab: ["18px", "28px"],
|
||||||
},
|
},
|
||||||
backgroundColor: ['disabled'],
|
backgroundColor: ["disabled"],
|
||||||
textColor: ['disabled'],
|
textColor: ["disabled"],
|
||||||
keyframes: {
|
keyframes: {
|
||||||
wiggle: {
|
wiggle: {
|
||||||
'0%, 100%': { transform: 'rotate(-3deg)' },
|
"0%, 100%": { transform: "rotate(-3deg)" },
|
||||||
'50%': { transform: 'rotate(3deg)' },
|
"50%": { transform: "rotate(3deg)" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
wiggle: 'wiggle 3s ease-in-out infinite',
|
wiggle: "wiggle 3s ease-in-out infinite",
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
page: '100%',
|
page: "100%",
|
||||||
'page-md': '640px',
|
"page-md": "640px",
|
||||||
'page-lg': '896px',
|
"page-lg": "896px",
|
||||||
'page-xl': '1312px',
|
"page-xl": "1312px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -59,9 +59,9 @@ module.exports = {
|
||||||
plugin(function ({ addBase, theme }) {
|
plugin(function ({ addBase, theme }) {
|
||||||
addBase({
|
addBase({
|
||||||
body: {
|
body: {
|
||||||
color: theme('textColor.palette.600'),
|
color: theme("textColor.palette.600"),
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|
Reference in New Issue