Change energy station design

src/components/auth/AuthContext.tsx

@@ -1,6 +1,7 @@
 import { u128 } from '@polkadot/types'
 import { CodecMap } from '@polkadot/types/codec'
 import { isStr } from '@subsocial/utils'
+import BigNumber from 'bignumber.js'
 import BN from 'bn.js'
 import { useRouter } from 'next/router'
 import React, { createContext, useContext, useEffect, useState } from 'react'
@@ -55,7 +56,12 @@ export type AuthContextProps = {
   setEmail: React.Dispatch<React.SetStateAction<string | null>>
 }
 
-const energyStub: EnergyState = { status: 'normal', transactionsCount: 0, coefficient: 1 }
+const energyStub: EnergyState = {
+  energyBalance: new BigNumber(0),
+  status: 'normal',
+  transactionsCount: 0,
+  coefficient: 1,
+}
 
 const contextStub: AuthContextProps = {
   state: {

src/components/energy/Energy.module.sass

@@ -1,75 +1,247 @@
 @import 'src/styles/subsocial-vars.scss'
 
-.DropdownOverlay
-  background-color: #fff
-  width: 250px
-  box-shadow: $shadow
+.EnergyStationLayout
+  display: flex
+  gap: $space_normal
 
-.DropdownOverlayContent
-  padding: $space_normal $space_big 0 $space_big
+.LeftSideLayout
+  display: flex
+  flex-direction: column
+  gap: $space_normal
 
-.OverlayCollapse
-  padding-bottom: $space_normal
+  width: 70%
 
-  \:global .ant-collapse-header
-    padding: 0 !important
-    padding-left: 3rem !important
+.RightSideLayout
+  display: flex
+  flex-direction: column
+  gap: $space_normal
 
-  \:global .ant-collapse-arrow
-    left: $space_big !important
-    font-size: $font_normal !important
+  width: 30%
 
-  \:global .ant-collapse-content-box
-    padding: $space_small $space_big 0 $space_big !important
+.TitleSection
+  display: flex
+  flex-direction: column
+  gap: $space_small
 
-.QuestionCircle
-  color: $color_primary
+  .Title
+    font-size: $font_big
+    line-height: 26px
+    font-weight: 700
+    color: $color_font_normal
 
-.OnlyProgress
-  cursor: pointer
+  .Description
+    font-size: $font_small
+    line-height: 22px
+    color: #64748B
 
-.CallsValue
-  font-size: 19px
-.CallsLowValue
-  color: $color_gold
-.CallsZeroValue
-  color: $color_error
+.EnergyStatsSection
+  display: flex
+  gap: $space_normal
+  align-items: center
 
-.Warning
-  background-color: #FFFBE6
-  padding: $space_normal $space_big $space_small $space_big
+.StatsCard
+  display: flex
+  gap: $space_tiny
+  flex-direction: column
+  width: 100%
+  border-radius: 20px
+  padding: $space_normal
+  background: white
 
-.Error
-  background-color: #F9D8D8
+  .StatsTitle
+    color: #64748B
+    font-size: $font_small
+    font-weight: 400
+    line-height: 22px
 
-.EnergyIndicator
-  display: flex
+  .StatsValue
+    display: flex
+    gap: $space_mini
+    align-items: center
 
-.Title
-  font-size: 44px
+    svg
+      color: rgba(100, 116, 139, 0.8)
+      font-size: 20px
 
-.Intro
-  text-align: center
-  margin-bottom: 32px
+    span
+      color: #0F172A
+      font-size: $space_large
+      font-weight: 600
+      line-height: 32px
+
+.EnergyFormCard
+  border-radius: 20px
+
+  background-color: #fff
+  box-shadow: 0px 4px 10.9px 0px #edf2f6a1
 
-.InfoSection
-  border: 1px solid $color_light_border
-  border-radius: $border_radius_normal
   padding: $space_normal
-  margin-top: $space_normal
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+.EnergyFormTitle
+  font-size: $font_large
+  font-weight: 700
+  line-height: 26px
+  color: $color_font_normal
+
+.EnergyForm
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+  :global(.ant-form-item)
+    margin-bottom: 0
 
 .AmountFormInput
+  :global(.ant-form-item-label)
+    padding: 0
+
   label
     width: 100%
+    margin-bottom: 0
+    line-height: 26px
+
+.InfoSection
+  display: flex
+  gap: $space_small
+  align-items: center
+
+  .Divider
+    color: #64748B
+
+  .InfoSectionItem
+    width: 100%
+    background: #F8FAFC
+    border-radius: 20px
+    padding: $space_normal
+
+    display: flex
+    flex-direction: column
+    gap: $space_tiny
+
+    .ItemTitle
+      font-size: $font_small
+      font-weight: 400
+      line-height: 22px
+      color: #64748B
+
+    .ItemValue
+      font-size: $font_large
+      font-weight: 600
+      line-height: 32px
+      color: #0F172A
+
+.EnergyFormButton
+  height: 46px !important
+
+  &:disabled
+    background-color: rgba(235, 47, 149, 0.5) !important
+    color: white
+
+    &:hover
+      color: white
+
+.FAQWrapper
+  background: white
+  border-radius: 20px
+  padding: $space_normal
+
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+  .FAQTitleSection
+    display: flex
+    align-items: center
+    justify-content: space-between
+    gap: $space_tiny
+
+    .Title
+      font-size: $font_large
+      font-weight: 700
+      line-height: 26px
+      color: $color_font_normal
+
+  :global(.ant-collapse)
+    display: flex
+    flex-direction: column
+    gap: $space_normal
+
+    :global(.ant-collapse-content-box)
+      padding: $space_small 0 0 $space_large !important
+
+      p
+        color: #64748B
+        margin-bottom: 0
+
+  :global(.ant-collapse-header)
+    padding: 0 !important
+    padding-left: $space_large !important
+
+    color: $color_font_normal !important
+    font-size: $font_small !important
+    line-height: 22px !important
+    b
+      font-weight: 500 !important
+
+    :global(.ant-collapse-arrow)
+      left: 0 !important
+      top: 11px !important
+
+.QuestionWrapper
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+  background: white
+  border-radius: 20px
+  padding: $space_normal
+
   margin-bottom: $space_normal
 
-.Faq
-  \:global .ant-card-body
-    padding: 12px
+  a
+    width: fit-content
+    display: flex
+    align-items: center
+    justify-content: center
+
+  .QuestionTitle
+    font-size: $font_large
+    font-weight: 700
+    line-height: 26px
+    color: $color_font_normal
 
-.FontSmall
-  font-size: $font_small
+@media (max-width: 875px)
+  .EnergyStationLayout
+    flex-direction: column
 
-.EnergyIcon
-  path
-    stroke-width: 36px
+  .LeftSideLayout
+    width: 100%
+
+  .RightSideLayout
+
+    width: 100%
+
+  .QuestionWrapper
+    align-items: center
+
+@media (max-width: 560px)
+  .InfoSection
+    flex-direction: column
+
+  .EnergyStatsSection
+    flex-direction: column
+
+.FormAlert
+  border-radius: 12px
+
+.RecipientInput
+  :global(.ant-form-item-label)
+    padding: 0
+
+  label
+    width: 100%
+    margin-bottom: 0
+    line-height: 26px