From 812524672ebc93e192df18b0e57a08632e53b04f Mon Sep 17 00:00:00 2001
From: Skylar Saveland <skylar.saveland@gmail.com>
Date: Mon, 27 Feb 2023 16:21:18 -0800
Subject: [PATCH] some extra style for subs on profile (#95)

Just want to stop pushing to main with little stuff ;0
---
 .../free2z/src/components/MySubscribers.tsx   | 107 ++++++++++--------
 .../free2z/src/components/MySubscriptions.tsx |  94 ++++++++-------
 2 files changed, 111 insertions(+), 90 deletions(-)

diff --git a/ts/react/free2z/src/components/MySubscribers.tsx b/ts/react/free2z/src/components/MySubscribers.tsx
index feeecb9eb56..3616f05bad3 100644
--- a/ts/react/free2z/src/components/MySubscribers.tsx
+++ b/ts/react/free2z/src/components/MySubscribers.tsx
@@ -1,14 +1,10 @@
 import { useEffect, useState } from "react"
-import { Link as RouterLink, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import {
-    Avatar, Badge, Box, Divider, FormControlLabel, Grid, Link, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, ListSubheader, Pagination, Paper, Stack, Switch, Tooltip, Typography
+    Box, Divider, List, Pagination, Paper, Stack, Switch, Tooltip, Typography
 } from "@mui/material"
 import axios from "axios";
 import { useGlobalState } from "../state/global";
-import { count } from "console";
-import moment from "moment";
-import TuziIcon from "./TuziIcon";
-import MySubscriptionRow from "./MySubscriptionRow";
 import MySubscriberRow from "./MySubscriberRow";
 
 
@@ -86,6 +82,7 @@ export default function MySubscribers() {
             padding: "3%",
             width: "100%",
         }}>
+
             {!loading && subscribers.length === 0 &&
                 <Typography>
                     No one has subscribed to you!
@@ -96,58 +93,70 @@ export default function MySubscribers() {
 
             <List>
                 {((!loading || loaded) && subscribers.length > 0) &&
-                    <Box
-                        component="div"
-                        sx={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center'
-                        }}
-                    >
-                        <Typography
-                            variant="subtitle1"
-                            style={{ marginLeft: "0.5em" }}
+                    <>
+                        <Box
+                            component="div"
+                            sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                            }}
                         >
-                            Who subscribes to you
-                        </Typography>
+                            <Typography
+                                variant="subtitle1"
+                                style={{ marginLeft: "0.5em" }}
+                            >
+                                Who subscribes to you
+                            </Typography>
 
-                        <Box component="div" sx={{ ml: 'auto' }}>
-                            <Tooltip title="Sort by expiration rather than max price">
+                            <Box component="div" sx={{ ml: 'auto' }}>
+                                <Tooltip title="Sort by expiration rather than max price">
 
-                                <Switch
-                                    checked={checked}
-                                    onChange={() => {
-                                        setPageQuery({
-                                            ...pageQuery,
-                                            sort: checked ? '-max_price' : 'expires',
-                                        })
-                                        setChecked(!checked)
-                                    }}
-                                    name="sort-toggle"
-                                    color="primary"
-                                />
-                            </Tooltip>
+                                    <Switch
+                                        checked={checked}
+                                        onChange={() => {
+                                            setPageQuery({
+                                                ...pageQuery,
+                                                sort: checked ? '-max_price' : 'expires',
+                                            })
+                                            setChecked(!checked)
+                                        }}
+                                        name="sort-toggle"
+                                        color="primary"
+                                    />
+                                </Tooltip>
+                            </Box>
                         </Box>
-                    </Box>
+                        <Divider
+                            style={{
+                                width: "100%",
+                                padding: "0.25em",
+                                margin: "0 auto",
+                            }}
+                        />
+                    </>
+                }
+                {
+                    count > 20 &&
+                    <Stack
+                        direction="row" alignItems="center" justifyContent="center"
+                        style={{ marginTop: "0.5em" }}
+                    >
+                        <Pagination
+                            size="small"
+                            // TODO: hardcoding breakds
+                            count={Math.ceil(count / 20)}
+                            page={pageQuery.page}
+                            onChange={handleChangePage}
+                            variant="outlined"
+                            color="primary"
+                        />
+                    </Stack>
                 }
                 {subscribers.map((sub, index) => {
                     return <MySubscriberRow sub={sub} index={index} />
                 })}
             </List>
-            {
-                count > 20 &&
-                <Stack direction="row" alignItems="center" justifyContent="center">
-                    <Pagination
-                        size="small"
-                        // TODO: hardcoding breakds
-                        count={Math.ceil(count / 20)}
-                        page={pageQuery.page}
-                        onChange={handleChangePage}
-                        variant="outlined"
-                        color="primary"
-                    />
-                </Stack>
-            }
         </Paper>
     )
 }
\ No newline at end of file
diff --git a/ts/react/free2z/src/components/MySubscriptions.tsx b/ts/react/free2z/src/components/MySubscriptions.tsx
index 7773eed19b0..7d12d6e245f 100644
--- a/ts/react/free2z/src/components/MySubscriptions.tsx
+++ b/ts/react/free2z/src/components/MySubscriptions.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { Link as RouterLink, useSearchParams } from 'react-router-dom'
 import {
     Box,
+    Divider,
     FormControlLabel, Link, List, ListItem, ListItemSecondaryAction,
     ListItemText,
     Pagination, Paper, Stack, Switch, Tooltip, Typography
@@ -85,39 +86,63 @@ export default function MySubscriptions() {
             <List>
 
                 {((!loading || loaded) && subscriptions.length > 0) &&
-                    <Box
-                        component="div"
-                        sx={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center'
-                        }}
-                    >
-                        <Typography variant="subtitle1"
-                            style={{ marginLeft: "0.5em" }}
+                    <>
+                        <Box
+                            component="div"
+                            sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                            }}
                         >
-                            Who you subscribe to
-                        </Typography>
+                            <Typography variant="subtitle1"
+                                style={{ marginLeft: "0.5em" }}
+                            >
+                                Who you subscribe to
+                            </Typography>
+
+                            <Box component="div" sx={{ ml: 'auto' }}>
+                                <Tooltip title="Sort by expiration rather than max price">
+                                    <Switch
+                                        checked={checked}
+                                        onChange={() => {
+                                            setPageQuery({
+                                                ...pageQuery,
+                                                sort: checked ? '-max_price' : 'expires',
+                                            })
+                                            setChecked(!checked)
+                                        }}
+                                        name="sort-toggle"
+                                        color="primary"
+                                    />
+                                </Tooltip>
+                            </Box>
 
-                        <Box component="div" sx={{ ml: 'auto' }}>
-                            <Tooltip title="Sort by expiration rather than max price">
-                                <Switch
-                                    checked={checked}
-                                    onChange={() => {
-                                        setPageQuery({
-                                            ...pageQuery,
-                                            sort: checked ? '-max_price' : 'expires',
-                                        })
-                                        setChecked(!checked)
-                                    }}
-                                    name="sort-toggle"
-                                    color="primary"
-                                />
-                            </Tooltip>
                         </Box>
-                    </Box>
+                        <Divider
+                            style={{
+                                width: "100%",
+                                padding: "0.25em",
+                                margin: "0 auto",
+                            }}
+                        />
+                    </>
+                }
+                {count > 20 &&
+                    <Stack direction="row" alignItems="center" justifyContent="center">
+                        <Pagination
+                            size="small"
+                            // TODO: hardcoding breakds
+                            count={Math.ceil(count / 20)}
+                            page={pageQuery.page}
+                            onChange={handleChangePage}
+                            variant="outlined"
+                            color="primary"
+                        />
+                    </Stack>
                 }
 
+
                 {subscriptions.map((sub, index) => {
                     return <MySubscriptionRow
                         sub={sub}
@@ -127,19 +152,6 @@ export default function MySubscriptions() {
                     />
                 })}
             </List>
-            {count > 20 &&
-                <Stack direction="row" alignItems="center" justifyContent="center">
-                    <Pagination
-                        size="small"
-                        // TODO: hardcoding breakds
-                        count={Math.ceil(count / 20)}
-                        page={pageQuery.page}
-                        onChange={handleChangePage}
-                        variant="outlined"
-                        color="primary"
-                    />
-                </Stack>
-            }
         </Paper>
     )
 }
\ No newline at end of file