add omf badge https://github.com/ohmyform/ui/issues/11

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - mobile improvements for lists and home page
 - markdown support for page paragraphs and field description
+- omf badge
 
 ### Changed
 ### Fixed

components/omf.module.scss

@@ -0,0 +1,71 @@
+$omf: #000;
+$omfText: #FFF;
+$support: #000;
+
+.badge {
+  left: -65px;
+  height: 30px;
+  top: 40px;
+  position: absolute;
+  text-decoration: none;
+  width: 250px;
+  transform: rotate(-45deg);
+  z-index: 100;
+  font-weight: bold;
+  letter-spacing: 0.05em;
+
+  span {
+    background: transparentize($omf, 0.3);
+    color: $omfText;
+    font-size: 14px;
+    left: 0;
+    padding: 5px 0;
+    position: absolute;
+    text-align: center;
+    width: 250px;
+    box-shadow: rgba($omf, 0.2) 1px 1px 10px;
+    transition: opacity 1s;
+    &:last-child {
+      background: transparentize($support, 0.3);
+      opacity: 0;
+    }
+  }
+
+  :hover span {
+    &:first-child {
+      opacity: 0;
+    }
+    &:last-child {
+      opacity: 1;
+    }
+  }
+
+  span {
+    opacity: 1 !important;
+    backface-visibility: hidden;
+    transition: transform 1s;
+    &:last-child {
+      transform: rotateX(180deg);
+    }
+  }
+
+  &:hover span {
+    &:first-child {
+      transform: rotateX(180deg);
+    }
+    &:last-child {
+      transform: rotateX(360deg);
+    }
+  }
+
+  @media (max-width: 500px) {
+    left: -85px;
+    height: 30px;
+    top: 20px;
+    width: 250px;
+
+    span {
+      font-size: 11px;
+    }
+  }
+}

components/omf.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import scss from './omf.module.scss'
+
+export const Omf: React.FC = () => {
+  return (
+    <a className={scss.badge} href="https://ohmyform.com" target={'_blank'} rel={'noreferrer'}>
+      <span>OhMyForm</span>
+      <span>Fork & Support!</span>
+    </a>
+  )
+}

pages/form/[id]/index.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import Swiper from 'react-id-swiper'
 import { ReactIdSwiperProps } from 'react-id-swiper/lib/types'
 import * as OriginalSwiper from 'swiper'
+import {Omf} from '../../../components/omf'
 import { useSubmission } from '../../../components/use.submission'
 
 interface Props {
@@ -77,6 +78,7 @@ const Index: NextPage<Props> = () => {
         background: design.colors.backgroundColor,
       }}
     >
+      <Omf />
       <Swiper {...swiperConfig}>
         {[
           data.form.startPage.show ? (

pages/index.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoadingPage } from '../components/loading.page'
+import {Omf} from '../components/omf'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { publicRuntimeConfig } = getConfig() as {
@@ -58,6 +59,7 @@ const Index: NextPage = () => {
         background: '#437fdc',
       }}
     >
+      <Omf />
       <img
         alt={'OhMyForm'}
         style={{

pages/login/confirm/[code].tsx

@@ -3,10 +3,12 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
+import {Omf} from '../../../components/omf'
 
 const Index: NextPage = () => {
   return (
     <AuthLayout>
+      <Omf />
       <Alert
         style={{
           margin: 'auto',

pages/login/index.tsx

@@ -14,6 +14,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {Omf} from '../../components/omf'
 import scss from './index.module.scss'
 
 const Index: NextPage = () => {
@@ -48,6 +49,7 @@ const Index: NextPage = () => {
 
   return (
     <AuthLayout loading={loading}>
+      <Omf />
       <Form
         form={form}
         name="login"

pages/login/recover.tsx

@@ -3,10 +3,12 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
+import {Omf} from '../../components/omf'
 
 const Recover: NextPage = () => {
   return (
     <AuthLayout>
+      <Omf />
       <Alert
         style={{
           margin: 'auto',

pages/register.tsx

@@ -16,6 +16,7 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ErrorPage } from '../components/error.page'
+import {Omf} from '../components/omf'
 import { SETTINGS_QUERY, SettingsQueryData } from '../graphql/query/settings.query'
 import scss from './register.module.scss'
 
@@ -59,6 +60,7 @@ const Register: NextPage = () => {
 
   return (
     <AuthLayout loading={loading}>
+      <Omf />
       <Form
         form={form}
         name="login"