diff --git a/package.json b/package.json index a2dcd2893f..0c96120b27 100644 --- a/package.json +++ b/package.json @@ -34,10 +34,10 @@ "devDependencies": { "@types/node": "^14.14.33", "@types/react": "^17.0.3", - "autoprefixer": "^10.2.5", - "postcss": "^8.2.8", + "autoprefixer": "^10.2.6", + "postcss": "^8.3.5", "prisma": "^2.23.0", - "tailwindcss": "^2.0.3", + "tailwindcss": "^2.2.2", "typescript": "^4.2.3" } } diff --git a/styles/components/activelink.css b/styles/components/activelink.css deleted file mode 100644 index c6f93463d3..0000000000 --- a/styles/components/activelink.css +++ /dev/null @@ -1,16 +0,0 @@ - -nav#nav--settings > a { - @apply border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 border-l-4 px-3 py-2 flex items-center text-sm font-medium; -} - -nav#nav--settings > a svg { - @apply text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6; -} - -nav#nav--settings > a.active { - @apply bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700; -} - -nav#nav--settings > a.active svg { - @apply text-blue-500; -} \ No newline at end of file diff --git a/styles/components/buttons.css b/styles/components/buttons.css deleted file mode 100644 index 4ed4994241..0000000000 --- a/styles/components/buttons.css +++ /dev/null @@ -1,76 +0,0 @@ -@layer components { - /* Primary buttons */ - .btn-xs.btn-primary { - @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-sm.btn-primary { - @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn.btn-primary { - @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-lg.btn-primary { - @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-xl.btn-primary { - @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-wide.btn-primary { - @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - /* Secondary buttons */ - .btn-xs.btn-secondary { - @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-sm.btn-secondary { - @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn.btn-secondary { - @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-lg.btn-secondary { - @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-xl.btn-secondary { - @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-wide.btn-secondary { - @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - /* White buttons */ - .btn-xs.btn-white { - @apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-sm.btn-white { - @apply inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn.btn-white { - @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-lg.btn-white { - @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-xl.btn-white { - @apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } - - .btn-wide.btn-white { - @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; - } -} \ No newline at end of file diff --git a/styles/components/spinner.css b/styles/components/spinner.css deleted file mode 100644 index dc61ce28f2..0000000000 --- a/styles/components/spinner.css +++ /dev/null @@ -1,14 +0,0 @@ -.loader { - margin: 80px auto; - border: 8px solid #f3f3f3; /* Light grey */ - border-top: 8px solid #039be5; /* Blue */ - border-radius: 50%; - width: 60px; - height: 60px; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} \ No newline at end of file diff --git a/styles/components/table.css b/styles/components/table.css deleted file mode 100644 index a2d88616a6..0000000000 --- a/styles/components/table.css +++ /dev/null @@ -1,4 +0,0 @@ - -table tbody tr:nth-child(odd) { - @apply bg-gray-50; -} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 926cc766ad..14106bdaec 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,10 +2,121 @@ @tailwind components; @tailwind utilities; -@import './components/buttons.css'; -@import './components/spinner.css'; -@import './components/activelink.css'; -@import './components/table.css'; + +/* note(PeerRich): TODO move @layer components into proper React Components: