commit feda0cefc346f5498d8889b0b6dfe43349c92ffc
parent 6cab0a97bd3a30e2b0e62e908356ded7433aac07
Author: MTRNord <mtrnord1@gmail.com>
Date: Tue, 4 Jan 2022 03:49:32 +0100
Add follow button and fix font styles
Diffstat:
3 files changed, 37 insertions(+), 5 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -30,7 +30,7 @@ export default class Header extends Component {
<span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-[27px]'></span>
<div className='relative lg:m-0 mt-4'>
<div className='flex'>
- <button className='text-teal-400 bg-transparent relative h-[54px] min-w-[150px] z-[2] cursor-auto font-semibold'>Submit</button>
+ <button className='text-teal-400 bg-transparent relative h-[54px] min-w-[150px] z-[2] cursor-auto font-bold'>Submit</button>
</div>
</div>
</header>
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -126,6 +126,7 @@ class Profile extends Component<Props, State> {
const banner_event = this.state.events.filter(event => event.type === "matrixart.profile_banner")[0];
const avatar_url = this.state.avatar_url;
+ // TODO opengraph shows mxid instead of displayname
return (
<div className="h-full bg-[#f8f8f8] dark:bg-[#06070D]">
<Head>
@@ -155,7 +156,7 @@ class Profile extends Component<Props, State> {
</div>
</span>
<div className="ml-[20px] flex flex-col justify-center">
- <h1 className="font-medium text-5xl text-gray-900 dark:text-gray-200 mt-[-17px] flex items-[flex-end]">{this.state.displayname}</h1>
+ <h1 className="font-extrabold text-5xl text-gray-900 dark:text-gray-200 mt-[-17px] flex items-[flex-end]">{this.state.displayname}</h1>
</div>
</div>
</div>
@@ -165,9 +166,15 @@ class Profile extends Component<Props, State> {
<span id="magic-spacer"></span>
<div className="flex items-center w-full h-full overflow-hidden whitespace-nowrap box-border min-w-fit">
<Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-[8px] px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Home</a></Link>
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-medium text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Gallery</a></Link>
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-medium text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Favourites</a></Link>
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-medium text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>About</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Gallery</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Favourites</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>About</a></Link>
+ </div>
+ <div className="pr-[15px]">
+ {/*TODO Share menu here*/}
+ </div>
+ <div>
+ <button id="reflection" className="min-w-[126px] h-[52px] min-h-[40px] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-[20px] flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">Follow</button>
</div>
</nav>
</div>
diff --git a/styles/globals.css b/styles/globals.css
@@ -24,4 +24,29 @@ html, body, #__next {
overflow: hidden;
clip: rect(1px,1px,1px,1px);
white-space: nowrap;
+}
+
+#reflection:before {
+ position: absolute;
+ content: "";
+ display: block;
+ pointer-events: none;
+ transition: all .1s linear;
+ transform-origin: 0 0;
+ background-image: radial-gradient(ellipse at 110% 130%,#fff,hsla(0,0%,100%,0) 80%);
+ background-position-y: 0;
+ background-repeat: no-repeat;
+ top: -50px;
+ left: 40%;
+ margin-left: -80px;
+ width: 100px;
+ height: 100px;
+ transform: rotate(-68deg) translateX(-50%);
+ opacity: .8;
+ z-index: -1;
+}
+
+#reflection:hover::before {
+ left: 50%;
+ opacity: .5;
}
\ No newline at end of file
