From e9b722849399e9a48e4e980b1a2f2e3603218e58 Mon Sep 17 00:00:00 2001 From: Kiran Date: Thu, 24 Feb 2022 09:46:49 +0530 Subject: [PATCH] Style the index page --- components/Footer.tsx | 2 +- components/Header.tsx | 6 +++- components/Layout.tsx | 1 + pages/index.tsx | 65 ++++++++++++++++++++++++++++++++----------- styles/globals.css | 4 +-- 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 32cc029..fb3aad5 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -17,7 +17,7 @@ export default function Footer() { Mock SAML

- Powered by{' '} + Powered by Mock SAML

diff --git a/components/Layout.tsx b/components/Layout.tsx index 5f6351f..43bec3b 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -5,6 +5,7 @@ import Header from './Header'; type LayoutProps = { children: ReactNode; }; + export default function Layout({ children }: LayoutProps) { return ( <> diff --git a/pages/index.tsx b/pages/index.tsx index c4401a6..b087a8b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,4 @@ import { GetStaticProps } from 'next'; -import Head from 'next/head'; import Link from 'next/link'; import React from 'react'; import config from '../lib/env'; @@ -21,24 +20,56 @@ export const getStaticProps: GetStaticProps = async () => { }; const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => { + const { ssoUrl, entityId, certificate } = metadata; + return ( -
- - Mock SAML IdP - Metadata - -
-

SSO URL

-

{metadata.ssoUrl}

-

Entity ID

-

{metadata.entityId}

-

Certificate

-

{metadata.certificate}

-

-

- Download Metadata -

+
+
+
+

+ Mock SAML Metadata +

+

+ Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke + farm-to-table. Franzen you probably haven't heard of them man bun deep. +

+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
-
+ ); }; diff --git a/styles/globals.css b/styles/globals.css index 4b6848e..0563c1a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -11,7 +11,7 @@ html, body { padding: 0; margin: 0; - font-family: "Manrope", sans-serif; + font-family: 'Manrope', sans-serif; height: 100%; } #__next { @@ -29,7 +29,7 @@ a { @layer components { .button { - @apply block py-2 px-4 leading-8 bg-primary/90 text-white font-semibold rounded-lg shadow-md hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100; + @apply block px-4 py-2 font-semibold leading-8 text-white rounded-lg shadow-md bg-primary/90 hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100; } .input { @apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;