Skip to content
Snippets Groups Projects
Commit 89fb053a authored by francoisdillinger's avatar francoisdillinger
Browse files

Created night temp svg

parent 1519d852
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/svgNightTemp.js 0 → 100644
+ 88
− 0
View file @ 89fb053a
import * as React from "react";
const SvgNightTemp = (props) => {
return(
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" xmlnsSerif="http://www.serif.com/" style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin: 'round' }}>
<g transform="matrix(2.57801,0,0,2.57801,-74.7976,-452.339)">
<g transform="matrix(54.1785,0,0,54.1785,182.463,369.702)"/>
<text x={69.447} y={369.702} style={{ fontFamily: "'Sanchez-Regular', 'Sanchez '", fontSize: 54.178 }}>
{props.nightTemp}<tspan x={136.141} y={369.702}>°</tspan>F
</text>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2"/>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2" />
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path
d="M337.3,223.7L362.1,230.7C362.713,230.845 363.207,231.301 363.4,231.9L370.3,256.7C370.551,257.422 371.236,257.908 372,257.908C372.764,257.908 373.449,257.422 373.7,256.7L380.7,231.9C380.845,231.287 381.301,230.793 381.9,230.6L406.7,223.7C407.422,223.449 407.908,222.764 407.908,222C407.908,221.236 407.422,220.551 406.7,220.3L381.9,213.3C381.287,213.155 380.793,212.699 380.6,212.1L373.7,187.3C373.449,186.578 372.764,186.092 372,186.092C371.236,186.092 370.551,186.578 370.3,187.3L363.3,212.1C363.155,212.713 362.699,213.207 362.1,213.4L337.3,220.3C336.578,220.551 336.092,221.236 336.092,222C336.092,222.764 336.578,223.449 337.3,223.7Z"
style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}
/>
</g>
<g id="e" transform="matrix(1.54711,0,0,1.54711,62.2641,56.3496)">
<path d="M179.7,120.2C127.659,120.475 84.583,77.94 84.2,25.9C84.212,17.9 85.254,9.934 87.3,2.2C39.423,7.175 2.55,47.866 2.3,96C2.683,148.04 45.759,190.575 97.8,190.3C142.3,190.3 179.6,160.3 190.2,119.7C186.713,120.087 183.208,120.287 179.7,120.3"
style={{
fill: "url(#_Linear4)",
fillRule: "nonzero",
stroke: "rgb(114,185,213)",
strokeWidth: "4.5px",
}} />
</g>
<defs>
<linearGradient
id="_Linear1"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(36,62.4,-62.4,36,294,112.8)">
<stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
</linearGradient>
<linearGradient
id="_Linear2"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(879.534,1517.32,-1517.32,879.534,12661.4,7975.03)"
>
<stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
</linearGradient>
<linearGradient
id="_Linear3"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2255.05,3906.83,-3906.83,2255.05,25924.4,14176)">
<stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
<stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
</linearGradient>
<linearGradient
id="_Linear4"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(94.6,163.8,-163.8,94.6,38.8,20.8)">
<stop offset="0" style={{stopColor:"rgb(134,195,219)", stopOpacity:1}} />
<stop offset="0.5" style={{stopColor:"rgb(134,195,219)", stopOpacity:1}} />
<stop offset="1" style={{stopColor:"rgb(94,175,207)", stopOpacity:1}} />
</linearGradient>
</defs>
</svg>
);
}
export default SvgNightTemp;
\ No newline at end of file
frontend/src/tempsCollection.js
+ 2
− 2
View file @ 89fb053a
......@@ -33,7 +33,7 @@ const TempsCollection = (props) => {
<div id="outsideTemp" className='temps'>
<p className='title'>Outside</p>
<p className='title'>Temperature</p>
<p className='temperatures'>{outdoorTemp} &deg;F</p>
<p className='temperatures'>{outdoorTemp != null ? outdoorTemp.toFixed(0) + " \u00b0F" : "Loading..."}</p>
</div>
<div id="currentTemp" className='temps'>
<p className='title'>Current</p>
......@@ -48,7 +48,7 @@ const TempsCollection = (props) => {
data-tooltip-html="Temperature can affect our state of mind. Based on our research, setting<br /> the temperature between 68 and 72 is optimal for sleep and comfort while<br /> working along side the patterns of our core body temperature.">
<p className='title'>Comfort</p>
<p className='title'>Temperature</p>
<p className='temperatures'>81 &deg;F</p>
<p className='temperatures'>70 &deg;F</p>
</div>
</div>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment