apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(frontend): migrate to tailwindcss v3

Browse source
This commit is contained in:
Julian Tölle 2022-06-25 14:23:39 +02:00
parent d0522df5ee
commit 325e26e0c1
15 changed files with 28 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/App.tsx
View file

@ -11,7 +11,6 @@ import { ReportTopArtists } from "./components/ReportTopArtists";
import { ReportTopGenres } from "./components/ReportTopGenres";
import { ReportTopTracks } from "./components/ReportTopTracks";
import { useAuth } from "./hooks/use-auth";
import "./tailwind/generated.css";
export function App() {
const { isLoaded } = useAuth();

6
frontend/src/components/NavBar.tsx
View file

@ -9,11 +9,11 @@ export const NavBar: React.FC = () => {
return (
<div className="flex items-center justify-between flex-wrap bg-green-500 p-6">
<div className="flex items-center flex-shrink-0 text-white mr-6">
<div className="flex items-center shrink-0 text-white mr-6">
<span className="font-semibold text-xl tracking-tight">Listory</span>
</div>
<nav className="w-full block flex-grow lg:flex lg:items-center lg:w-auto ">
<div className="text-sm lg:flex-grow">
<nav className="w-full block grow lg:flex lg:items-center lg:w-auto ">
<div className="text-sm lg:grow">
{user && (
<>
<Link to="/">

6
frontend/src/components/RecentListens.tsx
View file

@ -32,11 +32,11 @@ export const RecentListens: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Recent listens</p>
<button
className="flex-shrink-0 mx-2 bg-transparent hover:bg-green-500 text-green-500 hover:text-white font-semibold py-2 px-4 border border-green-500 hover:border-transparent rounded"
className="shrink-0 mx-2 bg-transparent hover:bg-green-500 text-green-500 hover:text-white font-semibold py-2 px-4 border border-green-500 hover:border-transparent rounded"
onClick={reload}
>
<ReloadIcon className="w-5 h-5 fill-current" />
@ -107,7 +107,7 @@ const Pagination: React.FC<{
) : (
<div
key={i}
className="opacity-50 cursor-default bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-l"
className="cursor-default bg-gray-300/50 text-gray-700/50 font-bold py-2 px-4 rounded-l"
>
...
</div>

2
frontend/src/components/ReportListens.tsx
View file

@ -47,7 +47,7 @@ export const ReportListens: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Listen Report</p>
</div>

2
frontend/src/components/ReportTopAlbums.tsx
View file

@ -36,7 +36,7 @@ export const ReportTopAlbums: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Top Albums</p>
</div>

2
frontend/src/components/ReportTopArtists.tsx
View file

@ -35,7 +35,7 @@ export const ReportTopArtists: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Top Artists</p>
</div>

2
frontend/src/components/ReportTopGenres.tsx
View file

@ -40,7 +40,7 @@ export const ReportTopGenres: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Top Genres</p>
</div>

2
frontend/src/components/ReportTopTracks.tsx
View file

@ -37,7 +37,7 @@ export const ReportTopTracks: React.FC = () => {
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="md:shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Top Tracks</p>
</div>

4
frontend/src/tailwind.css → frontend/src/index.css
View file

@ -1,7 +1,3 @@
@import "loader.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

1
frontend/src/index.tsx
View file

@ -5,6 +5,7 @@ import { App } from "./App";
import { ProvideApiClient } from "./hooks/use-api-client";
import { ProvideAuth } from "./hooks/use-auth";
import * as serviceWorker from "./serviceWorker";
import "./index.css";
const root = createRoot(document.getElementById("root")!);