Tailwind theme

.github/workflows/deploy.yml

@@ -19,5 +19,5 @@ jobs:
           access_token: ${{ secrets.SPACE_ACCESS_TOKEN }}
           id: ${{ secrets.SPACE_PROJECT_ID }}
           version: "0.1.0"
-          notes: "Release automatically with GitHub deta action"
-          listed: true
+          notes: "Released automatically with GitHub deta action"
+          listed: false

.vscode/launch.json

@@ -2,7 +2,7 @@
   "compounds": [
     {
       "name": "subabot",
-      "configurations": ["backend", "frontend"],
+      "configurations": ["backend", "svelte"],
       "stopAll": true
     }
   ],
@@ -24,6 +24,13 @@
       "request": "launch",
       "cwd": "${workspaceFolder}/frontend",
       "command": "npm run dev"
+    },
+    {
+      "name": "svelte",
+      "type": "node-terminal",
+      "request": "launch",
+      "cwd": "${workspaceFolder}/svelte",
+      "command": "npm run dev"
     }
   ]
 }

README.md

@@ -12,11 +12,14 @@ _An AI-powered Slack alert bot to subscribe, classify and notify for keywords on
 
 ## 🚀 Get Started
 
-Subabot runs on [Deta Space](https://deta.space), a new personal Cloud. After you sign up, you get your own instance of Subabot, it is completely isolated from other users and we can't access it.
+Subabot runs on [Deta Space](https://deta.space), a new personal Cloud. After you sign up and install the app, you get your own instance of Subabot, it is completely isolated from other users and we can't access it.
 
 You can think of it like installing an app on your phone, but instead of the app being on your phone, it exists on the internet for you to access from all of your devices. You remain in control of your apps and your data.
 
-After you sign up for [Deta Space](https://deta.space), install the [Subabot App](https://deta.space/discovery/subabot) and you are good to go 🎉
+1. Sign up to [Deta Space](https://deta.space) for free
+2. Install the [Subabot App](https://deta.space/discovery/@dorukgezici/subabot)
+3. Configure the environment variables via project settings
+4. Add the Slack app to your workspace 🎉
 
 ## 🔨 Features & Roadmap
 

frontend/app/globals.scss

@@ -2,14 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --primary: #203A43FF;
-  --dark: #0F2027FF;
-  --light: #2C5364FF;
-  --lighter: #B0C4DEFF;
-}
-
 body {
-  @apply bg-slate-300;
   @apply text-primary;
 }

frontend/app/layout.tsx

@@ -2,7 +2,7 @@ import Footer from "@/components/Footer";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { Inter } from "next/font/google";
+import { PT_Mono } from "next/font/google";
 import type { ReactNode } from "react";
 import "./globals.scss";
 
@@ -14,7 +14,7 @@ export const metadata = {
     "An AI-powered Slack alert bot to subscribe, classify and notify for keywords on the web.",
 };
 
-const font = Inter({ subsets: ["latin"] });
+const font = PT_Mono({ weight: "400", subsets: ["latin-ext"] });
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (

frontend/app/page.tsx

@@ -27,7 +27,7 @@ export default async function Home() {
 
   return (
     <main>
-      <section className="h-screen flex flex-wrap items-center justify-center overflow-hidden space-y-12 bg-gradient-to-tl from-dark via-primary to-light">
+      <section className="h-screen flex flex-wrap items-center justify-center overflow-hidden space-y-12 bg-gradient-to-tl from-neutral via-primary to-secondary">
         <RobotTile />
 
         <div className="bg-primary opacity-95 absolute p-8 sm:p-16 md:p-24 shadow-2xl rounded-3xl w-full lg:w-2/3 max-w-[900px] border-solid border-2 border-primary">

frontend/components/RobotTile/index.tsx

@@ -37,7 +37,7 @@ export default function RobotTile() {
     <FontAwesomeIcon
       key={index} icon={faRobot}
       className={classNames(
-        'text-[10rem] text-lighter opacity-75 m-4',
+        'text-[10rem] text-accent opacity-75 m-4',
         index % 2 === 0 ? 'rotate-[-20deg]' : 'rotate-[20deg]',
         index === botIndex && 'fa-bounce z-10'
       )}

frontend/package.json

@@ -20,6 +20,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/node": "^20.4.6",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",

frontend/tailwind.config.js

@@ -4,15 +4,22 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        primary: "var(--primary)",
-        dark: "var(--dark)",
-        light: "var(--light)",
-        lighter: "var(--lighter)",
+  daisyui: {
+    themes: [
+      {
+        subabot: {
+          primary: "#203a43ff",
+          secondary: "#2c5364ff",
+          accent: "#b0c4deff",
+          neutral: "#0f2027ff",
+          "base-100": require("tailwindcss/colors").slate[300],
+          info: "#3abff8",
+          success: "#36d399",
+          warning: "#fbbd23",
+          error: "#f87272",
+        },
       },
-    },
+    ],
   },
-  plugins: [require("daisyui")],
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
 };