Devconnect: add tailwind support, fix font loading, fix overflow issu…

…e on city guide

devconnect/package.json

@@ -13,6 +13,7 @@
     "@notionhq/client": "^0.4.11",
     "@splinetool/react-spline": "^2.2.6",
     "@splinetool/runtime": "^0.9.402",
+    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "dat.gui": "^0.7.7",
     "framer-motion": "^10.16.4",
@@ -23,6 +24,7 @@
     "moment-timezone": "^0.5.34",
     "moment-timezone-data-webpack-plugin": "^1.5.0",
     "next": "13.4.9",
+    "postcss": "^8.4.31",
     "query-string": "^7.0.1",
     "react": "^18.2.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",
@@ -39,13 +41,16 @@
     "sharp": "^0.29.3",
     "slick": "1.12.2",
     "slugify": "^1.6.6",
-    "stats.js": "^0.17.0"
+    "stats.js": "^0.17.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
     "@svgr/webpack": "^6.1.1",
     "@types/node": "16.11.11",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
     "eslint": "7",
     "eslint-config-next": "^13.2.4",
     "eslint-import-resolver-typescript": "^2.5.0",

devconnect/src/pages/_app.tsx

@@ -1,8 +1,12 @@
 import 'styles/globals.scss'
 import type { AppProps } from 'next/app'
 import { Roboto, Roboto_Condensed } from 'next/font/google'
-export const roboto = Roboto({ subsets: ['latin'], weight: ['400', '700'], display: 'swap' })
-export const robotoCondensed = Roboto_Condensed({ subsets: ['latin'], weight: ['400', '700'] })
+export const roboto = Roboto({ subsets: ['latin'], variable: '--font-roboto', weight: ['400', '700'], display: 'swap' })
+export const robotoCondensed = Roboto_Condensed({
+  subsets: ['latin'],
+  variable: '--font-roboto-condensed',
+  weight: ['400', '700'],
+})
 
 // Safari 100vh works poorly - this is the workaround
 if (typeof window !== 'undefined') {

devconnect/src/pages/city-guide.tsx

@@ -644,7 +644,7 @@ const tabs = [
     value: 'history-and-culture',
     content: () => {
       return (
-        <div className={`tab-content ${css['history-and-culture']}`}>
+        <div className={`tab-content ${css['history-and-culture']}`} style={{ overflow: 'hidden' }}>
           <p className="">
             Istanbul lies in a geographically unique spot, being the only city that covers two continents - Europe and
             Asia. Istanbul is not only a fusion of continents, it&apos;s also a unique blend of cultures. Ancient
@@ -691,7 +691,7 @@ const tabs = [
 
           <p className="bold">Books</p>
 
-          <SwipeToScroll>
+          <SwipeToScroll scrollIndicatorDirections={{ right: true }}>
             <div className={css['media']}>
               {[
                 {
@@ -745,7 +745,7 @@ const tabs = [
 
           <p className="bold">Movies</p>
 
-          <SwipeToScroll>
+          <SwipeToScroll scrollIndicatorDirections={{ right: true }}>
             <div className={css['media']}>
               {[
                 {
@@ -791,7 +791,7 @@ const tabs = [
 
           <p className="bold">Documentaries</p>
 
-          <SwipeToScroll>
+          <SwipeToScroll scrollIndicatorDirections={{ right: true }}>
             <div className={css['media']}>
               {[
                 {

devconnect/src/pages/index.tsx

@@ -31,6 +31,7 @@ import { BlogPost } from 'types/BlogPost'
 import { BlogReel } from 'common/components/blog-posts/BlogPosts'
 import ShapesImage from 'assets/images/shapes.png'
 import useDimensions from 'react-cool-dimensions'
+import LibButton from 'lib/components/button'
 import moment from 'moment'
 // import BluePrint from 'assets/images/blueprint-bg.png'
 // import VideoPlaceholder from 'assets/images/devconnect-video-placeholder.png'
@@ -671,6 +672,8 @@ const Home: NextPage = (props: any) => {
     <>
       <SEO />
       <div className={css.container}>
+        {/* <LibButton />
+        <div className="m-5 text-sky-400">haha</div> */}
         <main id="main" className={css.main}>
           <Scene className={css['scene-hero']}>
             <Header />

devconnect/src/styles/globals.scss

@@ -1,3 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    font-family: var(--font-roboto);
+  }
+}
+
 @import './reset.scss';
 @import './variables.scss';
 @import './layout.scss';
@@ -7,14 +17,15 @@ html,
 body,
 #__next {
   height: 100%;
+  line-height: normal;
   // font-family: 'Roboto', sans-serif;
   // font-family: 'Inter', sans-serif;
 }
 
 body {
   color: $white;
   // background: linear-gradient(60deg, #0d0d20, #161627, #312046, #121212);
-  font-family: var(--font-roboto);
+  // font-family: var(--font-roboto);
   overflow-x: hidden;
 }
 
@@ -498,6 +509,9 @@ a {
 }
 
 .icon {
+  display: inline-block;
+  vertical-align: baseline;
+
   * {
     fill: var(--icon-color);
   }

devconnect/styles/globals.scss

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

devconnect/tailwind.config.js

@@ -0,0 +1,14 @@
+// const { fontFamily } = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['src/**/*.{ts,tsx}', '../lib/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-roboto)'], // , ...fontFamily.sans],
+      },
+    },
+  },
+}